@channel.io/bezier-react 2.2.4 → 2.3.1

package/src/components/AlphaStatusBadge/StatusBadge.types.ts

@@ -0,0 +1,26 @@
+import type { BezierComponentProps, SizeProps } from '~/src/types/props'
+
+export type StatusBadgeSize = 'm' | 'l'
+
+interface StatusBadgeOwnProps {
+  /**
+   * `online` is a boolean value that determines the color of the badge.
+   * If `online` is true, badge will be green.
+   * If `online` is false, badge will be gray (when `doNotDisturb` is false)
+   * or yellow (when `doNotDisturb` is true).
+   * @default false
+   */
+  online?: boolean
+  /**
+   * `doNotDisturb` is a boolean value that determines the shape of the badge.
+   * If `doNotDisturb` is true, badge will be a crescent moon.
+   * If `doNotDisturb` is false, badge will be a full circle.
+   * @default false
+   */
+  doNotDisturb?: boolean
+}
+
+export interface StatusBadgeProps
+  extends BezierComponentProps<'div'>,
+    SizeProps<StatusBadgeSize>,
+    StatusBadgeOwnProps {}

package/src/components/AlphaStatusBadge/index.ts

@@ -0,0 +1,5 @@
+export { StatusBadge as AlphaStatusBadge } from './StatusBadge'
+export type {
+  StatusBadgeProps as AlphaStatusBadgeProps,
+  StatusBadgeSize as AlphaStatusBadgeSize,
+} from './StatusBadge.types'

package/src/components/Banner/Banner.stories.tsx

@@ -4,7 +4,7 @@ import {
   BlockIcon,
   CancelIcon,
   CancelSmallIcon,
-  ChannelIcon,
+  ChannelBtnFilledIcon,
   CheckCircleFilledIcon,
   ErrorTriangleFilledIcon,
   Hourglass3Icon,
@@ -262,7 +262,7 @@ export const UsageLinkTo: StoryObj<{}> = {
   render: () => (
     <Banner
       variant="cobalt"
-      icon={ChannelIcon}
+      icon={ChannelBtnFilledIcon}
       content="채널톡 정말 좋은 서비스에요."
       hasLink
       linkText="사용안내"

package/src/components/Button/Button.module.scss

@@ -81,9 +81,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
         color: var(--bgtxt-absolute-white-dark);
+        /* stylelint-disable-next-line bezier/validate-token */
         background-color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-dark);
         }
       }
@@ -112,12 +114,14 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
   &:where(.style-secondary) {
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
+        /* stylelint-disable bezier/validate-token */
         color: var(--bgtxt-#{$color-variant}-normal);
         background-color: var(--bgtxt-#{$color-variant}-lightest);
 
         &#{$active-selector} {
           background-color: var(--bgtxt-#{$color-variant}-lighter);
         }
+        /* stylelint-enable bezier/validate-token */
       }
     }
 
@@ -154,9 +158,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
 
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
+        /* stylelint-disable-next-line bezier/validate-token */
         color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-lightest);
         }
       }
@@ -191,9 +197,11 @@ $active-selector: ':where(.active, :hover):where(:not(:disabled))';
     @each $color-variant in $chromatic-color-variants {
       &:where(.color-#{$color-variant}) {
         color: var(--bgtxt-absolute-white-dark);
+        /* stylelint-disable-next-line bezier/validate-token */
         background-color: var(--bgtxt-#{$color-variant}-normal);
 
         &#{$active-selector} {
+          /* stylelint-disable-next-line bezier/validate-token */
           background-color: var(--bgtxt-#{$color-variant}-dark);
         }
       }

package/src/components/Icon/Icon.stories.tsx

@@ -5,7 +5,6 @@ import {
   BookmarkFilledIcon,
   CallInProgressIcon,
   ChannelBtnFilledIcon,
-  ChannelIcon,
   CheckCircleIcon,
   ChevronDownDoubleIcon,
   ChevronRightIcon,
@@ -55,7 +54,7 @@ export default meta
 
 export const Primary: StoryObj<IconProps> = {
   args: {
-    source: ChannelIcon,
+    source: ChannelBtnFilledIcon,
     size: 'm',
     color: 'bg-black-darker',
   },

package/src/components/Toast/Toast.tsx

@@ -82,7 +82,7 @@ export function Toast({
 
   const className = classNames(
     styles.ToastElement,
-    zIndex && getZIndexClassName(zIndex),
+    getZIndexClassName(zIndex),
     placement && styles[`placement-${placement}`],
     isSlidingOut && styles['slide-out']
   )
@@ -193,6 +193,7 @@ const DEFAULT_OFFSET = {
 export function ToastProvider({
   autoDismissTimeout = 3000,
   container: givenContainer,
+  zIndex = 'toast',
   offset = DEFAULT_OFFSET,
   children = [],
 }: ToastProviderProps) {
@@ -213,7 +214,10 @@ export function ToastProvider({
               ? { right: px(offset?.right ?? DEFAULT_OFFSET.right) }
               : { left: px(offset?.left ?? DEFAULT_OFFSET.left) }),
           }}
-          className={styles.ToastContainer}
+          className={classNames(
+            styles.ToastContainer,
+            getZIndexClassName(zIndex)
+          )}
         >
           {toasts.map(({ id, onDismiss, ...rest }) => (
             <Toast
@@ -227,7 +231,7 @@ export function ToastProvider({
         </div>
       </InvertedThemeProvider>
     ),
-    [autoDismissTimeout, dismiss, offset]
+    [autoDismissTimeout, dismiss, offset, zIndex]
   )
 
   return (

package/src/components/Toast/Toast.types.ts

@@ -16,6 +16,9 @@ interface ToastOwnProps {
   appearance?: ToastAppearance
   preset?: ToastPreset
   icon?: BezierIcon
+  /**
+   * @deprecated Use `zIndex` of `ToastProvider` instead
+   */
   zIndex?: ZIndex
   autoDismiss?: boolean
   autoDismissTimeout?: number
@@ -40,6 +43,11 @@ type Offset = {
 interface ToastProviderOwnProps {
   offset?: Offset
   container?: HTMLElement | null
+  /**
+   * z-index level of the Toast container
+   * @default 'toast'
+   */
+  zIndex?: ZIndex
 }
 
 export interface ToastProviderProps

package/src/index.ts

@@ -13,6 +13,7 @@ export * from '~/src/components/AlphaFloatingButton'
 export * from '~/src/components/AlphaFloatingIconButton'
 export * from '~/src/components/AlphaIconButton'
 export * from '~/src/components/AlphaLoader'
+export * from '~/src/components/AlphaStatusBadge'
 export * from '~/src/components/AlphaToggleButton'
 export * from '~/src/components/AlphaToggleButtonGroup'
 export * from '~/src/components/AlphaTooltipPrimitive'

package/src/stories/alpha-color.mdx

@@ -1,5 +1,6 @@
-import { Markdown, Meta } from '@storybook/blocks'
+import { Markdown, Meta, DocsStory } from '@storybook/blocks'
 import { tokens } from '@channel.io/bezier-tokens/alpha'
+import { useLayoutEffect, useState } from 'react'
 
 import {
   LightThemeProvider,
@@ -9,60 +10,72 @@ import { HStack, VStack } from '~/src/components/Stack'
 
 <Meta title="alpha-foundation/Color" />
 
-export const Color = ({ name, value, reference }) => {
-  return (
-    <HStack spacing={20}>
-      <div
-        style={{
-          flex: 1,
-          boxShadow: value,
-          backgroundColor: `var(--${name})`,
-          height: 60,
-        }}
-      />
-      <VStack
+export const Color = ({ isHoveredColor, name, value, reference }) => {
+  const [isHovered, setIsHovered] = useState(false)
+  const color = isHovered ? `var(--${name}-hovered, var(--${name}))` :  `var(--${name})`
+
+return (
+
+<HStack
+  spacing={10}
+  height={80}
+  align="center"
+>
+  <div
+    style={{
+      flex: 1,
+      boxShadow: value,
+      backgroundColor: color,
+      height: '100%',
+    }}
+    onMouseEnter={() => {
+      setIsHovered(true)
+    }}
+    onMouseLeave={() => {
+      setIsHovered(false)
+    }}
+  />
+  <VStack
+    style={{
+      flex: 1,
+      color: 'var(--alpha-color-fg-black-darkest)',
+    }}
+    spacing={4}
+    justify="center"
+  >
+    <span style={{ fontSize: 11 }}>{name}</span>
+    <pre
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: 3,
+        fontSize: 9,
+        lineHeight: 1,
+        color: 'var(--alpha-color-fg-black-dark)',
+      }}
+    >
+      {isHoveredColor ? '' : reference ? 'var' : ''}
+      <pre
         style={{
-          flex: 1,
-          color: 'var(--alpha-color-fg-black-darkest)',
+          display: 'inline-flex',
+          fontSize: 'inherit',
+          lineHeight: 'inherit',
+          padding: '1px 2px',
+          backgroundColor: 'var(--alpha-color-bg-grey-lighter)',
+          borderRadius: 3,
+          border: '1px solid var(--alpha-color-bg-black-lightest)',
         }}
-        spacing={4}
-        justify="center"
       >
-        <span style={{ fontSize: 11 }}>{name}</span>
-        <pre
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 3,
-            fontSize: 9,
-            lineHeight: 1,
-            color: 'var(--alpha-color-fg-black-dark)',
-          }}
-        >
-          {reference ? 'var' : ''}
-          <pre
-            style={{
-              display: 'inline-flex',
-              fontSize: 'inherit',
-              lineHeight: 'inherit',
-              padding: '1px 2px',
-              backgroundColor: 'var(--alpha-color-bg-grey-lighter)',
-              borderRadius: 3,
-              border: '1px solid var(--alpha-color-bg-black-lightest)',
-            }}
-          >
-            {reference ? reference : value}
-          </pre>
-        </pre>
-      </VStack>
-    </HStack>
-  )
-}
+        {isHoveredColor ? value : reference ? reference : value}
+      </pre>
+    </pre>
+  </VStack>
+</HStack>
+)}
 
 export const Primary = () => (
   <HStack>
-
-    <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
+    <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
       {Object.entries(tokens.global.color).map(([key, { value, ref }]) => (
         <Color
           key={key}
@@ -74,7 +87,7 @@ export const Primary = () => (
     </VStack>
 
     <LightThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
         {Object.entries(tokens.lightTheme.color).map(([key, { value, ref }]) => (
           <Color
             key={key}
@@ -87,7 +100,7 @@ export const Primary = () => (
     </LightThemeProvider>
 
     <DarkThemeProvider>
-      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={20}>
+      <VStack style={{ flex: 1, backgroundColor: 'var(--alpha-color-surface-normal)' }} padding={0}>
         {Object.entries(tokens.darkTheme.color).map(([key, { value, ref }]) => (
           <Color
             key={key}

package/src/styles/components/elevation.module.scss

@@ -2,6 +2,7 @@ $elevations: 1, 2, 3, 4, 5, 6;
 
 @each $ev in $elevations {
   :where(.elevation-#{$ev}) {
+    /* stylelint-disable-next-line bezier/validate-token */
     box-shadow: var(--ev-#{$ev});
   }
 }

package/src/styles/components/radius.module.scss

@@ -13,6 +13,7 @@ $radiuses:
 
 @each $radius in $radiuses {
   :where(.radius-#{$radius}) {
+    /* stylelint-disable-next-line bezier/validate-token */
     border-radius: var(--radius-#{$radius});
   }
 }

package/src/styles/components/z-index.module.scss

@@ -2,6 +2,7 @@ $z-indices: hidden, base, floating, overlay, modal, toast, tooltip, important;
 
 @each $z-index in $z-indices {
   :where(.z-index-#{$z-index}) {
+    /* stylelint-disable-next-line bezier/validate-token */
     z-index: var(--z-index-#{$z-index});
   }
 }