@channel.io/bezier-react 2.1.0 → 2.2.0

package/src/components/AlphaSpinner/Spinner.module.scss

@@ -1,75 +0,0 @@
-@use '../../styles/mixins/dimension';
-
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.Spinner {
-  --b-spinner-size: initial;
-  --b-spinner-track-color: initial;
-  --b-spinner-indicator-color: initial;
-  --b-spinner-stroke-thickness: initial;
-
-  /* NOTE: stroke-width is fixed for the exceptional case of use inside buttons */
-  --b-spinner-stroke-width: 2px;
-  --b-spinner-view-box-size: 16;
-  --b-spinner-stroke-dasharray: 16 9999;
-
-  @include dimension.square(calc(1px * var(--b-spinner-size)));
-
-  display: inline-flex;
-  animation: rotate 1s linear infinite;
-
-  & :where(.track) {
-    fill: none;
-    stroke: var(--b-spinner-track-color);
-    stroke-linecap: round;
-    stroke-width: var(--b-spinner-stroke-width);
-  }
-
-  & :where(.indicator) {
-    fill: none;
-    stroke: var(--b-spinner-indicator-color);
-    stroke-dasharray: var(--b-spinner-stroke-dasharray);
-    stroke-linecap: round;
-    stroke-width: var(--b-spinner-stroke-width);
-  }
-
-  &:where(.size-s, .size-m) {
-    --b-spinner-stroke-width: calc(
-      var(--b-spinner-stroke-thickness) * var(--b-spinner-view-box-size) /
-        var(--b-spinner-size)
-    );
-  }
-
-  &:where(.size-s) {
-    --b-spinner-size: 28;
-    --b-spinner-stroke-thickness: 4px;
-  }
-
-  &:where(.size-m) {
-    --b-spinner-size: 50;
-    --b-spinner-stroke-thickness: 6px;
-  }
-
-  &:where(.variant-primary) {
-    --b-spinner-track-color: var(--alpha-color-primary-bg-lightest);
-    --b-spinner-indicator-color: var(--alpha-color-fg-blue-normal);
-  }
-
-  &:where(.variant-secondary) {
-    --b-spinner-track-color: var(--alpha-color-bg-black-light);
-    --b-spinner-indicator-color: var(--alpha-color-fg-black-light);
-  }
-
-  &:where(.variant-on-overlay) {
-    --b-spinner-track-color: var(--alpha-color-bg-absolute-white-lightest);
-    --b-spinner-indicator-color: var(--alpha-color-fg-absolute-white-light);
-  }
-}

package/src/components/AlphaSpinner/Spinner.test.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-
-import { render } from '~/src/utils/test'
-
-import { SPINNER_TEST_ID, Spinner } from './Spinner'
-
-describe('Spinner >', () => {
-  const renderSpinner = (props?: React.ComponentProps<typeof Spinner>) =>
-    render(<Spinner {...props} />)
-
-  it('should render', () => {
-    const { getByTestId } = renderSpinner()
-    const renderedSpinner = getByTestId(SPINNER_TEST_ID)
-    expect(renderedSpinner).toBeInTheDocument()
-  })
-
-  it('should render as a span element by default', () => {
-    const { getByTestId } = renderSpinner()
-    const renderedSpinner = getByTestId(SPINNER_TEST_ID)
-    expect(renderedSpinner.tagName).toBe('SPAN')
-  })
-
-  it('should forward ref', () => {
-    const ref = React.createRef<HTMLDivElement>()
-    renderSpinner({ ref })
-    expect(ref.current).toBeInTheDocument()
-  })
-
-  it('should receive size', () => {
-    const { getByTestId } = renderSpinner({ size: 'm' })
-    const renderedSpinner = getByTestId(SPINNER_TEST_ID)
-    expect(renderedSpinner).toHaveClass('size-m')
-  })
-})

package/src/components/AlphaSpinner/Spinner.tsx

@@ -1,49 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import classNames from 'classnames'
-
-import { type SpinnerProps } from './Spinner.types'
-
-import styles from './Spinner.module.scss'
-
-export const SPINNER_TEST_ID = 'bezier-spinner'
-
-export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
-  function Spinner(
-    { className, size, variant = 'secondary', ...rest },
-    forwardedRef
-  ) {
-    return (
-      <span
-        className={classNames(
-          styles.Spinner,
-          size && styles[`size-${size}`],
-          styles[`variant-${variant}`],
-          className
-        )}
-        ref={forwardedRef}
-        data-testid={SPINNER_TEST_ID}
-        {...rest}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 16 16"
-        >
-          <circle
-            cx="8"
-            cy="8"
-            r="6.5"
-            className={styles.track}
-          />
-
-          <circle
-            cx="8"
-            cy="8"
-            r="6.5"
-            className={styles.indicator}
-          />
-        </svg>
-      </span>
-    )
-  }
-)

package/src/components/AlphaSpinner/index.ts

@@ -1,2 +0,0 @@
-export { Spinner as AlphaSpinner } from './Spinner'
-export { type SpinnerProps as AlphaSpinnerProps } from './Spinner.types'