@channel.io/bezier-react 3.1.2 → 3.1.4

package/src/components/Emoji/Emoji.test.tsx

@@ -1,32 +0,0 @@
-import { render } from '~/src/utils/test'
-
-import { EMOJI_TEST_ID, Emoji } from './Emoji'
-import { type EmojiProps } from './Emoji.types'
-
-describe('Emoji Test >', () => {
-  const defaultProps: EmojiProps = { size: '24', name: 'a' }
-
-  const renderComponent = (props?: Partial<EmojiProps>) =>
-    render(
-      <Emoji
-        {...defaultProps}
-        {...props}
-      />
-    )
-
-  it('snapshot', () => {
-    const { getByTestId } = renderComponent()
-    const emoji = getByTestId(EMOJI_TEST_ID)
-
-    expect(emoji).toMatchSnapshot()
-  })
-
-  it('should render with emoji image', () => {
-    const { getByTestId } = renderComponent()
-    const emoji = getByTestId(EMOJI_TEST_ID)
-
-    expect(emoji).toHaveStyle(
-      'background-image: var(--b-emoji-background-image)'
-    )
-  })
-})

package/src/components/Emoji/__snapshots__/Emoji.test.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Emoji Test > snapshot 1`] = `
-<div
-  aria-description="a"
-  class="Emoji size-24"
-  data-testid="bezier-emoji"
-  role="img"
-  style="--b-emoji-background-image: url(https://cf.exp.channel.io/asset/emoji/images/80/a.png);"
-/>
-`;

package/src/components/FormControl/__snapshots__/FormControl.test.tsx.snap

@@ -1,249 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormControl > Snapshot > With multiple field 1`] = `
-<div>
-  <div
-    class="Stack display-flex direction-vertical margin layout"
-    data-testid="bezier-form-control"
-  >
-    <label
-      class="Text typo-13 bold align-left margin LabelText FormLabelWrapper position-top size-m"
-      data-testid="bezier-form-label"
-      id="form-label"
-      style="--b-text-color: var(--txt-black-darkest);"
-    >
-      Label
-    </label>
-    <div
-      aria-describedby="form-help-text"
-      aria-labelledby="form-label"
-      class="Stack display-flex direction-vertical justify-start align-stretch wrap margin layout"
-      data-testid="bezier-form-group"
-      id="form-group"
-      role="group"
-      style="--b-stack-spacing: 6px;"
-    >
-      <div
-        class="Stack display-flex direction-vertical margin layout"
-        data-testid="bezier-form-control"
-      >
-        <label
-          class="Text typo-13 bold align-left margin LabelText FormLabelWrapper position-top size-m"
-          data-testid="bezier-form-label"
-          for="field-:r3:"
-          id="field-:r3:-label"
-          style="--b-text-color: var(--txt-black-darkest);"
-        >
-          First Inner Label
-        </label>
-        <div
-          class="TextFieldWrapper variant-primary size-m size-m"
-          data-testid="bezier-text-input"
-        >
-          <input
-            autocomplete="off"
-            class="TextFieldInput"
-            id="field-:r3:"
-            size="36"
-          />
-        </div>
-      </div>
-      <div
-        class="Stack display-flex direction-vertical margin layout"
-        data-testid="bezier-form-control"
-      >
-        <label
-          class="Text typo-13 bold align-left margin LabelText FormLabelWrapper position-top size-m"
-          data-testid="bezier-form-label"
-          for="field-:r4:"
-          id="field-:r4:-label"
-          style="--b-text-color: var(--txt-black-darkest);"
-        >
-          Second Inner Label
-        </label>
-        <div
-          class="TextFieldWrapper variant-primary size-m size-m"
-          data-testid="bezier-text-input"
-        >
-          <input
-            aria-invalid="true"
-            autocomplete="off"
-            class="TextFieldInput"
-            id="field-:r4:"
-            size="36"
-          />
-        </div>
-      </div>
-    </div>
-    <p
-      class="Text typo-13 align-left margin FormHelperText FormHelperTextWrapper"
-      data-testid="bezier-form-helper-text"
-      id="form-help-text"
-      style="--b-text-color: var(--txt-black-dark);"
-    >
-      Description
-    </p>
-  </div>
-</div>
-`;
-
-exports[`FormControl > Snapshot > With multiple field and left label position 1`] = `
-<div>
-  <div
-    class="Grid"
-    data-testid="bezier-form-control"
-  >
-    <label
-      class="Text typo-14 bold align-left margin LabelText FormLabelWrapper position-left size-m"
-      data-testid="bezier-form-label"
-      id="form-label"
-      style="--b-text-color: var(--txt-black-darkest);"
-    >
-      Label
-    </label>
-    <div
-      aria-describedby="form-help-text"
-      aria-labelledby="form-label"
-      class="Stack display-flex direction-vertical justify-start align-stretch wrap margin layout"
-      data-testid="bezier-form-group"
-      id="form-group"
-      role="group"
-      style="--b-stack-spacing: 6px;"
-    >
-      <div
-        class="Stack display-flex direction-vertical margin layout"
-        data-testid="bezier-form-control"
-      >
-        <label
-          class="Text typo-13 bold align-left margin LabelText FormLabelWrapper position-top size-m"
-          data-testid="bezier-form-label"
-          for="field-:r6:"
-          id="field-:r6:-label"
-          style="--b-text-color: var(--txt-black-darkest);"
-        >
-          First Inner Label
-        </label>
-        <div
-          class="TextFieldWrapper variant-primary size-m size-m"
-          data-testid="bezier-text-input"
-        >
-          <input
-            autocomplete="off"
-            class="TextFieldInput"
-            id="field-:r6:"
-            size="36"
-          />
-        </div>
-      </div>
-      <div
-        class="Stack display-flex direction-vertical margin layout"
-        data-testid="bezier-form-control"
-      >
-        <label
-          class="Text typo-13 bold align-left margin LabelText FormLabelWrapper position-top size-m"
-          data-testid="bezier-form-label"
-          for="field-:r7:"
-          id="field-:r7:-label"
-          style="--b-text-color: var(--txt-black-darkest);"
-        >
-          Second Inner Label
-        </label>
-        <div
-          class="TextFieldWrapper variant-primary size-m size-m"
-          data-testid="bezier-text-input"
-        >
-          <input
-            aria-invalid="true"
-            autocomplete="off"
-            class="TextFieldInput"
-            id="field-:r7:"
-            size="36"
-          />
-        </div>
-      </div>
-    </div>
-    <p
-      class="Text typo-13 align-left margin FormHelperText FormHelperTextWrapper position-left"
-      data-testid="bezier-form-helper-text"
-      id="form-help-text"
-      style="--b-text-color: var(--txt-black-dark);"
-    >
-      Description
-    </p>
-  </div>
-</div>
-`;
-
-exports[`FormControl > Snapshot > With single field 1`] = `
-<div
-  class="Stack display-flex direction-vertical margin layout"
-  data-testid="bezier-form-control"
->
-  <label
-    class="Text typo-13 bold align-left margin LabelText FormLabelWrapper position-top size-m"
-    data-testid="bezier-form-label"
-    for="form"
-    id="form-label"
-    style="--b-text-color: var(--txt-black-darkest);"
-  >
-    Label
-  </label>
-  <div
-    class="TextFieldWrapper variant-primary size-m size-m"
-    data-testid="bezier-text-input"
-  >
-    <input
-      aria-describedby="form-help-text"
-      autocomplete="off"
-      class="TextFieldInput"
-      id="form"
-      size="36"
-    />
-  </div>
-  <p
-    class="Text typo-13 align-left margin FormHelperText FormHelperTextWrapper"
-    data-testid="bezier-form-helper-text"
-    id="form-help-text"
-    style="--b-text-color: var(--txt-black-dark);"
-  >
-    Description
-  </p>
-</div>
-`;
-
-exports[`FormControl > Snapshot > With single field and left label position 1`] = `
-<div
-  class="Grid"
-  data-testid="bezier-form-control"
->
-  <label
-    class="Text typo-14 bold align-left margin LabelText FormLabelWrapper position-left size-m"
-    data-testid="bezier-form-label"
-    for="form"
-    id="form-label"
-    style="--b-text-color: var(--txt-black-darkest);"
-  >
-    Label
-  </label>
-  <div
-    class="TextFieldWrapper variant-primary size-m size-m"
-    data-testid="bezier-text-input"
-  >
-    <input
-      aria-describedby="form-help-text"
-      autocomplete="off"
-      class="TextFieldInput"
-      id="form"
-      size="36"
-    />
-  </div>
-  <p
-    class="Text typo-13 align-left margin FormHelperText FormHelperTextWrapper position-left"
-    data-testid="bezier-form-helper-text"
-    id="form-help-text"
-    style="--b-text-color: var(--txt-black-dark);"
-  >
-    Description
-  </p>
-</div>
-`;

package/src/components/FormGroup/FormGroup.test.tsx

@@ -1,24 +0,0 @@
-import { render } from '~/src/utils/test'
-
-import { FormGroup } from './FormGroup'
-import { type FormGroupProps } from './FormGroup.types'
-
-describe('FormGroup >', () => {
-  let props: FormGroupProps
-
-  beforeEach(() => {
-    props = {
-      spacing: 6,
-      direction: 'vertical',
-    }
-  })
-
-  const renderComponent = () => render(<FormGroup {...props} />)
-
-  it('Snapshot >', () => {
-    const { getByRole } = renderComponent()
-    const rendered = getByRole('group')
-
-    expect(rendered).toMatchSnapshot()
-  })
-})

package/src/components/FormGroup/__snapshots__/FormGroup.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormGroup > Snapshot > 1`] = `
-<div
-  class="Stack display-flex direction-vertical justify-start align-stretch wrap margin layout"
-  data-testid="bezier-form-group"
-  role="group"
-  style="--b-stack-spacing: 6px;"
-/>
-`;

package/src/components/FormHelperText/__snapshots__/FormHelperText.test.tsx.snap

@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormErrorMessage > Snapshot > 1`] = `
-<p
-  aria-live="polite"
-  class="Text typo-13 align-left margin FormHelperText"
-  data-testid="bezier-form-error-message"
-  id="test"
-  style="--b-text-color: var(--bgtxt-orange-normal);"
->
-  Lorem ipsum
-</p>
-`;
-
-exports[`FormHelperText > Snapshot > 1`] = `
-<p
-  class="Text typo-13 align-left margin FormHelperText"
-  data-testid="bezier-form-helper-text"
-  id="test"
-  style="--b-text-color: var(--txt-black-dark);"
->
-  Lorem ipsum
-</p>
-`;

package/src/components/FormLabel/__snapshots__/FormLabel.test.tsx.snap

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FormLabel > Snapshot > 1`] = `
-<label
-  class="Text typo-13 bold align-left margin LabelText"
-  data-testid="bezier-form-label"
-  style="--b-text-color: var(--txt-black-darkest);"
->
-  label
-</label>
-`;

package/src/components/Help/__snapshots__/Help.test.tsx.snap

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Help > Snapshot > 1`] = `
-<svg
-  class="Icon size-xs margin Icon"
-  data-testid="bezier-help"
-  fill="none"
-  height="1em"
-  style="--b-icon-color: var(--txt-black-dark);"
-  viewBox="0 0 24 24"
-  width="1em"
-  xmlns="http://www.w3.org/2000/svg"
->
-  <path
-    clip-rule="evenodd"
-    d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m.83 12.541h-1.9v-.708c0-1.156.625-2.24 1.672-2.9.867-.546 1.337-.939 1.337-1.447 0-1.014-1-1.561-1.94-1.561-1.035 0-1.942.73-1.942 1.56h-1.9c0-1.875 1.758-3.46 3.841-3.46 2.154 0 3.842 1.52 3.842 3.46 0 1.655-1.392 2.533-2.225 3.056-.236.15-.784.573-.784 1.292zm-.889 3.631a1.244 1.244 0 1 1 0-2.487 1.244 1.244 0 0 1 0 2.487"
-    fill="currentColor"
-    fill-rule="evenodd"
-  />
-</svg>
-`;

package/src/components/LegacyTooltip/__snapshots__/LegacyTooltip.test.tsx.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tooltip test > Tooltip with default props 1`] = `
-<body>
-  <div>
-    <div
-      class="LegacyTooltip"
-      data-testid="bezier-tooltip"
-    >
-      Text
-    </div>
-  </div>
-  <div
-    class="LegacyTooltipContentWrapper"
-    data-bezier-theme="dark"
-    style="position: fixed; top: 4px; left: 0px; transform: translate(-50%, 0%);"
-  >
-    <div
-      class="LegacyTooltipContent"
-      data-testid="bezier-tooltip-content"
-    >
-      <span
-        class="Text typo-13 multi-line-truncated margin"
-        data-testid="bezier-text"
-        style="--b-text-color: var(--txt-black-darkest); --b-text-line-clamp: 20;"
-      >
-        <span
-          class="Text typo-14 margin"
-          data-testid="bezier-text"
-        >
-          Hovered
-        </span>
-      </span>
-    </div>
-  </div>
-</body>
-`;

package/src/components/NavGroup/NavGroup.test.tsx

@@ -1,75 +0,0 @@
-import { DotIcon } from '@channel.io/bezier-icons'
-
-import { render } from '~/src/utils/test'
-
-import { Icon } from '~/src/components/Icon'
-
-import {
-  NAV_GROUP_LEFT_ICON_TEST_ID,
-  NAV_GROUP_TEST_ID,
-  NavGroup,
-} from './NavGroup'
-import type { NavGroupProps } from './NavGroup.types'
-
-describe('NavGroup Test >', () => {
-  let props: NavGroupProps
-
-  beforeEach(() => {
-    props = {
-      leftContent: DotIcon,
-      name: 'general',
-      content: 'test-content',
-      rightContent: (
-        <Icon
-          source={DotIcon}
-          size="xs"
-          color="bgtxt-orange-normal"
-        />
-      ),
-    }
-  })
-
-  const renderNavItem = (optionProps?: Partial<NavGroupProps>) =>
-    render(
-      <NavGroup
-        {...props}
-        {...optionProps}
-      />
-    )
-
-  describe('Snapshot >', () => {
-    it('Active', () => {
-      const { getByTestId } = renderNavItem({ active: true })
-
-      const rendered = getByTestId(NAV_GROUP_TEST_ID)
-
-      expect(rendered).toMatchSnapshot()
-    })
-
-    it('Not active', () => {
-      const { getByTestId } = renderNavItem({ active: false })
-
-      const rendered = getByTestId(NAV_GROUP_TEST_ID)
-
-      expect(rendered).toMatchSnapshot()
-    })
-  })
-
-  describe('LeftIcon Color', () => {
-    it('Icon color should be "bgtxt-blue-normal" when active prop is true', () => {
-      const { getByTestId } = renderNavItem({ active: true })
-
-      const rendered = getByTestId(NAV_GROUP_LEFT_ICON_TEST_ID)
-
-      expect(rendered).toHaveStyle('--b-icon-color: var(--bgtxt-blue-normal)')
-    })
-
-    it('Icon color should be "txt-black-dark" when active prop is false', () => {
-      const { getByTestId } = renderNavItem({ active: false })
-
-      const rendered = getByTestId(NAV_GROUP_LEFT_ICON_TEST_ID)
-
-      expect(rendered).toHaveStyle('--b-icon-color: var(--txt-black-dark)')
-    })
-  })
-})

package/src/components/NavGroup/__snapshots__/NavGroup.test.tsx.snap

@@ -1,121 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`NavGroup Test > Snapshot > Active 1`] = `
-<button
-  aria-controls="generalMenu"
-  aria-haspopup="false"
-  class="BaseButton Item active"
-  data-testid="bezier-nav-group"
-  role="menuitem"
-  type="button"
->
-  <div
-    class="LeftIconWrapper"
-  >
-    <svg
-      class="Icon size-s margin"
-      data-testid="bezier-nav-group-left-icon"
-      fill="none"
-      height="1em"
-      style="--b-icon-color: var(--bgtxt-blue-normal);"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        clip-rule="evenodd"
-        d="M17 12a5 5 0 1 1-10 0 5 5 0 0 1 10 0"
-        fill="currentColor"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
-  <span
-    class="Text typo-14 truncated margin"
-    data-testid="bezier-text"
-  >
-    test-content
-  </span>
-  <div
-    class="RightContentWrapper"
-  >
-    <svg
-      class="Icon size-xs margin"
-      data-testid="bezier-icon"
-      fill="none"
-      height="1em"
-      style="--b-icon-color: var(--bgtxt-orange-normal);"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        clip-rule="evenodd"
-        d="M17 12a5 5 0 1 1-10 0 5 5 0 0 1 10 0"
-        fill="currentColor"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
-</button>
-`;
-
-exports[`NavGroup Test > Snapshot > Not active 1`] = `
-<button
-  aria-controls="generalMenu"
-  aria-haspopup="false"
-  class="BaseButton Item"
-  data-testid="bezier-nav-group"
-  role="menuitem"
-  type="button"
->
-  <div
-    class="LeftIconWrapper"
-  >
-    <svg
-      class="Icon size-s margin"
-      data-testid="bezier-nav-group-left-icon"
-      fill="none"
-      height="1em"
-      style="--b-icon-color: var(--txt-black-dark);"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        clip-rule="evenodd"
-        d="M17 12a5 5 0 1 1-10 0 5 5 0 0 1 10 0"
-        fill="currentColor"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
-  <span
-    class="Text typo-14 truncated margin"
-    data-testid="bezier-text"
-  >
-    test-content
-  </span>
-  <div
-    class="RightContentWrapper"
-  >
-    <svg
-      class="Icon size-xs margin"
-      data-testid="bezier-icon"
-      fill="none"
-      height="1em"
-      style="--b-icon-color: var(--bgtxt-orange-normal);"
-      viewBox="0 0 24 24"
-      width="1em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        clip-rule="evenodd"
-        d="M17 12a5 5 0 1 1-10 0 5 5 0 0 1 10 0"
-        fill="currentColor"
-        fill-rule="evenodd"
-      />
-    </svg>
-  </div>
-</button>
-`;

package/src/components/NavItem/NavItem.test.tsx

@@ -1,66 +0,0 @@
-import { DotIcon } from '@channel.io/bezier-icons'
-
-import { render } from '~/src/utils/test'
-
-import {
-  NAV_ITEM_LEFT_ICON_TEST_ID,
-  NAV_ITEM_TEST_ID,
-  NavItem,
-} from './NavItem'
-import type { NavItemProps } from './NavItem.types'
-
-describe('NavItem Test >', () => {
-  let props: NavItemProps
-
-  beforeEach(() => {
-    props = {
-      leftContent: DotIcon,
-      name: 'general',
-      content: 'test-content',
-    }
-  })
-
-  const renderNavItem = (optionProps?: Partial<NavItemProps>) =>
-    render(
-      <NavItem
-        {...props}
-        {...optionProps}
-      />
-    )
-
-  describe('Snapshot >', () => {
-    it('Active', () => {
-      const { getByTestId } = renderNavItem({ active: true })
-
-      const rendered = getByTestId(NAV_ITEM_TEST_ID)
-
-      expect(rendered).toMatchSnapshot()
-    })
-
-    it('Not active', () => {
-      const { getByTestId } = renderNavItem({ active: false })
-
-      const rendered = getByTestId(NAV_ITEM_TEST_ID)
-
-      expect(rendered).toMatchSnapshot()
-    })
-  })
-
-  describe('LeftIcon Color', () => {
-    it('Icon color should be "bgtxt-blue-normal" when active prop is true', () => {
-      const { getByTestId } = renderNavItem({ active: true })
-
-      const rendered = getByTestId(NAV_ITEM_LEFT_ICON_TEST_ID)
-
-      expect(rendered).toHaveStyle('--b-icon-color: var(--bgtxt-blue-normal);')
-    })
-
-    it('Icon color should be "txt-black-dark" when active prop is false', () => {
-      const { getByTestId } = renderNavItem({ active: false })
-
-      const rendered = getByTestId(NAV_ITEM_LEFT_ICON_TEST_ID)
-
-      expect(rendered).toHaveStyle('--b-icon-color: var(--txt-black-dark);')
-    })
-  })
-})