Migrate Divider component with scss (#1861)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue
<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

- #1733

## Summary
<!-- Please brief explanation of the changes made -->

- `Divider` 컴포넌트의 스타일링을 styled-components 에서 scss 으로 변경합니다.
- 기존의 조건부 스타일링을 scss기반의 nested한 형태로 구현합니다

## Details
<!-- Please elaborate description of the changes -->

- `Divider` 컴포넌트의 인터페이스에 `MarginProps`가 추가됩니다.


### Breaking change? (Yes/No)
<!-- If Yes, please describe the impact and migration path for users -->

- No

## References
<!-- Please list any other resources or points the reviewer should be
aware of -->

- None

packages/bezier-react/src/components/Divider/Divider.module.scss

@@ -0,0 +1,48 @@
+@layer components {
+  .Divider {
+    --b-divider-indent-size: 6px;
+
+    border-radius: var(--radius-1);
+    background-color: var(--bdr-black-light);
+
+    &.horizontal {
+      width: calc(100% - 2 * var(--b-divider-indent-size));
+      height: var(--b-divider-thickness);
+      margin: var(--b-divider-indent-size);
+
+      &.without-indent {
+        width: 100%;
+        margin: 0;
+      }
+      &.without-side-indent {
+        width: 100%;
+        margin-left: 0;
+        margin-right: 0;
+      }
+      &.without-parallel-indent {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    &.vertical {
+      width: var(--b-divider-thickness);
+      height: calc(100% - 2 * var(--b-divider-indent-size));
+      margin: var(--b-divider-indent-size);
+
+      &.without-indent {
+        height: 100%;
+        margin: 0;
+      }
+      &.without-side-indent {
+        height: 100%;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+      &.without-parallel-indent {
+        margin-left: 0;
+        margin-right: 0;
+      }
+    }
+  }
+}

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

@@ -10,10 +10,10 @@ import { styled } from '~/src/foundation'
 
 import { ListItem } from '~/src/components/ListItem'
 
-import Divider from './Divider'
+import { Divider } from './Divider'
 import type DividerProps from './Divider.types'
 
-const meta:Meta<typeof Divider> = {
+const meta = {
   component: Divider,
   argTypes: {
     orientation: {
@@ -38,7 +38,8 @@ const meta:Meta<typeof Divider> = {
       },
     },
   },
-}
+} satisfies Meta<typeof Divider>
+
 export default meta
 
 interface WrapperProps {

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

@@ -1,146 +1,27 @@
 import React from 'react'
 
-import { LightFoundation } from '~/src/foundation'
-
 import { render } from '~/src/utils/test'
 
-import Divider, { DIVIDER_TEST_ID } from './Divider'
+import {
+  DIVIDER_TEST_ID,
+  Divider,
+} from './Divider'
 import type DividerProps from './Divider.types'
 
+import styles from './Divider.module.scss'
+
 describe('Divider', () => {
   const renderDivider = (props?: Partial<DividerProps>) => render(<Divider {...props} />)
 
   describe('no props specified', () => {
     it('should render default Divider', () => {
       const { getByTestId } = renderDivider()
       const divider = getByTestId(DIVIDER_TEST_ID)
-
-      expect(divider).toHaveStyle('width: calc(100% - 12px)')
-      expect(divider).toHaveStyle('height: 1px')
-      expect(divider).toHaveStyle('border-radius: 1px')
-      expect(divider).toHaveStyle(`background-color: ${LightFoundation.theme['bdr-black-light']}`)
-      expect(divider).toHaveStyle('margin: 6px')
-
+      expect(divider).toHaveClass(styles.Divider)
       expect(divider).toHaveAttribute('role', 'separator')
     })
   })
 
-  describe('indent', () => {
-    describe('horizontal divider', () => {
-      it('should have margin by default', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'horizontal',
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin: 6px')
-      })
-
-      it('should not have left, right margin when withoutSideIndent is true', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'horizontal',
-          withoutSideIndent: true,
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin-left: 0')
-        expect(divider).toHaveStyle('margin-right: 0')
-      })
-
-      it('should not have top, bottom margin when withoutParallelIndent is true', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'horizontal',
-          withoutParallelIndent: true,
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin-top: 0')
-        expect(divider).toHaveStyle('margin-bottom: 0')
-      })
-
-      it('should not have margin when both withoutSideIndent, withoutParallelIndent are true', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'horizontal',
-          withoutParallelIndent: true,
-          withoutSideIndent: true,
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin-top: 0')
-        expect(divider).toHaveStyle('margin-bottom: 0')
-        expect(divider).toHaveStyle('margin-left: 0')
-        expect(divider).toHaveStyle('margin-right: 0')
-      })
-
-      it('should not have margin when withoutIndent is true', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'horizontal',
-          withoutIndent: true,
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin: 0')
-      })
-    })
-
-    describe('vertical divider', () => {
-      it('should have margin by default', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'vertical',
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin: 6px')
-      })
-
-      it('should not have top, bottom margin when withoutSideIndent is true', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'vertical',
-          withoutSideIndent: true,
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin-top: 0')
-        expect(divider).toHaveStyle('margin-bottom: 0')
-      })
-
-      it('should not have left, right margin when withoutParallelIndent is true', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'vertical',
-          withoutParallelIndent: true,
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin-left: 0')
-        expect(divider).toHaveStyle('margin-right: 0')
-      })
-
-      it('should not have margin when both withoutSideIndent, withoutParallelIndent are true', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'vertical',
-          withoutParallelIndent: true,
-          withoutSideIndent: true,
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin-top: 0')
-        expect(divider).toHaveStyle('margin-bottom: 0')
-        expect(divider).toHaveStyle('margin-left: 0')
-        expect(divider).toHaveStyle('margin-right: 0')
-      })
-
-      it('should not have margin when withoutIndent is true', () => {
-        const { getByTestId } = renderDivider({
-          orientation: 'vertical',
-          withoutIndent: true,
-        })
-        const divider = getByTestId(DIVIDER_TEST_ID)
-
-        expect(divider).toHaveStyle('margin: 0')
-      })
-    })
-  })
-
   describe('accessibility', () => {
     it('should render with an separator role', () => {
       const { getByTestId } = renderDivider()

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

@@ -1,41 +1,63 @@
-import React, { forwardRef } from 'react'
+import React, {
+  type CSSProperties,
+  forwardRef,
+} from 'react'
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import classNames from 'classnames'
 
 import type DividerProps from './Divider.types'
 
-import * as Styled from './Divider.styled'
+import styles from './Divider.module.scss'
 
 export const DIVIDER_TEST_ID = 'bezier-react-divider'
 
-const Divider = forwardRef((
-  {
-    testId = DIVIDER_TEST_ID,
-    orientation = 'horizontal',
-    decorative,
-    withoutSideIndent = false,
-    withoutParallelIndent = false,
-    withoutIndent = false,
-    ...rest
-  }: DividerProps,
-  forwardedRef: React.Ref<HTMLElement>,
+export const DIVIDER_THICKNESS = 1
+
+/**
+ * `Divider` is a component to visually or semantically separate content.
+ *
+ * @example
+ *
+ * ```tsx
+ * <Divider
+ *   withoutSideIndent
+ * />
+ * ```
+ */
+export const Divider = forwardRef<HTMLDivElement, DividerProps>(({
+  orientation = 'horizontal',
+  decorative,
+  testId = DIVIDER_TEST_ID,
+  withoutSideIndent = false,
+  withoutParallelIndent = false,
+  withoutIndent = false,
+  style,
+  className,
+  ...rest
+}, forwardedRef,
 ) => (
   <SeparatorPrimitive.Root
     asChild
     orientation={orientation}
     decorative={decorative}
   >
-    <Styled.Divider
+    <div
       ref={forwardedRef}
       data-testid={testId}
-      orientation={orientation}
-      decorative={decorative}
-      withoutSideIndent={withoutSideIndent}
-      withoutParallelIndent={withoutParallelIndent}
-      withoutIndent={withoutIndent}
+      style={{
+        '--b-divider-thickness': `${DIVIDER_THICKNESS}px`,
+        ...style,
+      } as CSSProperties}
+      className={classNames(
+        styles.Divider,
+        styles[orientation],
+        withoutIndent && styles['without-indent'],
+        withoutParallelIndent && styles['without-parallel-indent'],
+        withoutSideIndent && styles['without-side-indent'],
+        className,
+      )}
       {...rest}
     />
   </SeparatorPrimitive.Root>
 ))
-
-export default Divider

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

@@ -1,8 +1,8 @@
 import type { SeparatorProps as SeparatorPrimitiveProps } from '@radix-ui/react-separator'
 
-import type { BezierComponentProps } from '~/src/types/ComponentProps'
+import type { AlphaBezierComponentProps } from '~/src/types/ComponentProps'
 
-interface DividerOptions {
+interface DividerOwnProps {
   /**
    * If true, the divider will be rendered without side padding,
    * which stands for the padding on the left and right sides of the horizontal divider,
@@ -30,6 +30,6 @@ interface DividerOptions {
 }
 
 export default interface DividerProps extends
-  BezierComponentProps,
+  AlphaBezierComponentProps,
   SeparatorPrimitiveProps,
-  DividerOptions {}
+  DividerOwnProps {}