@loadsmart/loadsmart-ui 7.6.0 → 8.0.0-beta.1

package/src/components/HighlightMatch/HighlightMatch.test.tsx

@@ -1,37 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import * as stories from './HighlightMatch.stories'
-import renderer, { screen } from '../../tests/renderer'
-import type { HighlightMatchProps } from './HighlightMatch'
-
-const { Playground } = composeStories(stories)
-
-describe('HighlightMatch', () => {
-  const setup = (overrides: Partial<HighlightMatchProps>) =>
-    renderer(<Playground {...overrides} data-testid="text" />).render()
-
-  it('renders the given text', () => {
-    setup({})
-
-    expect(screen.getByTestId('text')).toHaveTextContent('This is an example')
-  })
-
-  it('highlights the given match text', () => {
-    setup({})
-
-    expect(screen.getByText(/^example$/i)).toBeInTheDocument()
-  })
-
-  it('renders an empty string if the text is undefined', () => {
-    setup({ text: undefined })
-
-    expect(screen.getByTestId('text')).toHaveTextContent('')
-  })
-
-  it('renders the given text if there is no match', () => {
-    setup({ match: undefined })
-
-    screen.getByText('This is an example')
-  })
-})

package/src/components/HighlightMatch/HighlightMatch.tsx

@@ -1,29 +0,0 @@
-import React, { HTMLAttributes } from 'react'
-import styled from 'styled-components'
-import { getToken as token } from 'theming'
-
-import highlightMatch from 'utils/toolset/highlightMatch'
-
-export type HighlightMatchProps = {
-  text: string
-  match: string
-} & HTMLAttributes<HTMLSpanElement>
-
-const HighlightMatchWrapper = styled.span`
-  /* highlightMatch splits the label into separate HTML elements, thus we need
-  to preserve white-spaces, otherwise the browser wouldn't render them. */
-  white-space: pre;
-
-  mark {
-    color: inherit;
-    font-weight: ${token('font-weight-bold')};
-
-    background-color: ${token('color-transparent')};
-  }
-`
-
-const HighlightMatch = ({ text, match, ...props }: HighlightMatchProps): JSX.Element => {
-  return <HighlightMatchWrapper {...props}>{highlightMatch(text, match)}</HighlightMatchWrapper>
-}
-
-export default HighlightMatch

package/src/components/HighlightMatch/index.ts

@@ -1,2 +0,0 @@
-export { default as HighlightMatch } from './HighlightMatch'
-export type { HighlightMatchProps } from './HighlightMatch'

package/src/components/Icon/Icon.tsx

@@ -1,55 +0,0 @@
-import { IconFactory } from '../IconFactory'
-
-import BackIcon from './assets/back.svg'
-import BurguerMenuIcon from './assets/burger-menu.svg'
-import CalendarIcon from './assets/calendar.svg'
-import CaretDownIcon from './assets/caret-down.svg'
-import CaretLeftIcon from './assets/caret-left.svg'
-import CheckIcon from './assets/check.svg'
-import ChevronDownIcon from './assets/chevron-down.svg'
-import ChevronRightIcon from './assets/caret-right.svg'
-import CircleIcon from './assets/circle.svg'
-import CloseIcon from './assets/close.svg'
-import InformationIcon from './assets/information.svg'
-import MinusIcon from './assets/minus.svg'
-import PlusIcon from './assets/plus.svg'
-import RefreshIcon from './assets/refresh.svg'
-import SortAscIcon from './assets/sort-asc.svg'
-import SortDescIcon from './assets/sort-desc.svg'
-import SortIcon from './assets/sort.svg'
-import UploadIcon from './assets/upload.svg'
-import WarningIcon from './assets/warning.svg'
-import DotsHorizontalIcon from './assets/dots-horizontal.svg'
-import CaretRightLastIcon from './assets/caret-right-last.svg'
-
-import type { IconProps as GenericIconProps } from '../IconFactory'
-
-const icons = {
-  'burguer-menu': BurguerMenuIcon,
-  calendar: CalendarIcon,
-  'caret-down': CaretDownIcon,
-  'caret-left': CaretLeftIcon,
-  'caret-right': ChevronRightIcon,
-  'chevron-down': ChevronDownIcon,
-  back: BackIcon,
-  check: CheckIcon,
-  circle: CircleIcon,
-  close: CloseIcon,
-  information: InformationIcon,
-  minus: MinusIcon,
-  plus: PlusIcon,
-  refresh: RefreshIcon,
-  sort: SortIcon,
-  'sort-asc': SortAscIcon,
-  'sort-desc': SortDescIcon,
-  upload: UploadIcon,
-  warning: WarningIcon,
-  'dots-horizontal': DotsHorizontalIcon,
-  'caret-right-last': CaretRightLastIcon,
-}
-
-const Icon = IconFactory(icons)
-
-export type IconProps = GenericIconProps<typeof icons>
-
-export default Icon

package/src/components/Icon/assets/back.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M0 0h24v24H0V0z" fill="none" />
-  <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
-</svg>

package/src/components/Icon/assets/burger-menu.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M4 37.6667H44V33.2222H4V37.6667ZM4 26.5556H44V22.1111H4V26.5556ZM4 11V15.4444H44V11H4Z" fill="#313336"/>
-</svg>

package/src/components/Icon/assets/calendar.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M0 0h24v24H0V0z" fill="none" />
-  <path
-    d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V10h16v11zm0-13H4V5h16v3z" />
-</svg>

package/src/components/Icon/assets/caret-down.svg

@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-  <path d="M24 30L13 19H35L24 30Z" clip-rule="evenodd" />
-</svg>

package/src/components/Icon/assets/caret-left.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M30 42.3848L34.2426 38.1421L20.1005 24L34.2426 9.85786L30 5.61522L15.8579 19.7574L11.6152 24L15.8579 28.2426L30 42.3848Z" />
-</svg>

package/src/components/Icon/assets/caret-right-last.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2501 6.38126L14.1842 10.4471L27.7371 24L14.1842 37.5529L18.2501 41.6187L31.803 28.0659L35.8688 24L31.803 19.9341L18.2501 6.38126Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40.2922 38.375L44.1256 38.375L44.1256 9.625L40.2922 9.625L40.2922 38.375Z"/>
-</svg>

package/src/components/Icon/assets/caret-right.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M18 5.61522L13.7574 9.85786L27.8995 24L13.7574 38.1421L18 42.3848L32.1421 28.2426L36.3848 24L32.1421 19.7574L18 5.61522Z" />
-</svg>

package/src/components/Icon/assets/check.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M44.4203 13.3431L40.1777 9.1005L18.9645 30.3137L9.06496 20.4142L4.82232 24.6569L14.7218 34.5563L18.9645 38.799L23.2071 34.5563L44.4203 13.3431Z" />
-</svg>

package/src/components/Icon/assets/chevron-down.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z" />
-</svg>

package/src/components/Icon/assets/circle.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
-  <circle cx="9" cy="9" r="9" fill-rule="evenodd" />
-</svg>

package/src/components/Icon/assets/close.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M17.0711 4.69671L15.3033 2.92894L10 8.23224L4.6967 2.92894L2.92893 4.69671L8.23223 10L2.92893 15.3033L4.6967 17.0711L10 11.7678L15.3033 17.0711L17.0711 15.3033L11.7678 10L17.0711 4.69671Z" />
-</svg>

package/src/components/Icon/assets/dots-horizontal.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M14 24a5 5 0 11-10 0 5 5 0 0110 0zm15 0a5 5 0 11-10 0 5 5 0 0110 0zm15 0a5 5 0 11-10 0 5 5 0 0110 0z" fill="currentColor" fill-rule="evenodd"/></svg>

package/src/components/Icon/assets/information.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M12 2C6.48625 2 2 6.48625 2 12C2 17.5138 6.48625 22 12 22C17.5138 22 22 17.5138 22 12C22 6.48625 17.5138 2 12 2ZM12 19.2727C11.2473 19.2727 10.6364 18.6618 10.6364 17.9091C10.6364 17.1564 11.2473 16.5455 12 16.5455C12.7527 16.5455 13.3636 17.1564 13.3636 17.9091C13.3636 18.6618 12.7527 19.2727 12 19.2727ZM13.3636 14.2727H10.6364L10.6364 5.18182L13.3636 5.18182L13.3636 14.2727Z" />
-</svg>

package/src/components/Icon/assets/minus.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <path d="M0 0h24v24H0V0z" fill="none" />
-  <path d="M19 13H5v-2h14v2z" />
-</svg>

package/src/components/Icon/assets/plus.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-  <rect fill="none" height="24" width="24" />
-  <path d="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6V13z" />
-</svg>

package/src/components/Icon/assets/refresh.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-  <path d="M6.782 1.5a4.499 4.499 0 0 0-4.437 3.785l-.89-.888-.705.705 2.123 2.123 2.12-2.122-.708-.708-.935.935A3.503 3.503 0 0 1 6.782 2.5c1.93 0 3.5 1.57 3.5 3.5s-1.57 3.5-3.5 3.5v1a4.5 4.5 0 0 0 0-9Z" />
-</svg>

package/src/components/Icon/assets/sort-asc.svg

@@ -1,7 +0,0 @@
-<svg viewBox="0 0 10 11" xmlns="http://www.w3.org/2000/svg" fill="none">
-    <path id="svg_1" fill="#313336" d="m4.58334,0l4.58332,4.41667l-9.16666,0l4.58334,-4.41667z" clip-rule="evenodd"
-        fill-rule="evenodd" />
-    <path id="svg_2" fill="#CACCCF" d="m4.58335,10.83337l-4.58333,-4.4167l9.16664,0l-4.58331,4.4167z"
-        clip-rule="evenodd" fill-rule="evenodd" />
-
-</svg>

package/src/components/Icon/assets/sort-desc.svg

@@ -1,7 +0,0 @@
-<svg viewBox="0 0 10 11" xmlns="http://www.w3.org/2000/svg" fill="none">
-    <path id="svg_1" fill="#CACCCF" d="m4.58334,0l4.58332,4.41667l-9.16666,0l4.58334,-4.41667z" clip-rule="evenodd"
-        fill-rule="evenodd" />
-    <path id="svg_2" fill="#313336" d="m4.58335,10.83337l-4.58333,-4.4167l9.16664,0l-4.58331,4.4167z"
-        clip-rule="evenodd" fill-rule="evenodd" />
-
-</svg>

package/src/components/Icon/assets/sort.svg

@@ -1,7 +0,0 @@
-<svg viewBox="0 0 10 11" xmlns="http://www.w3.org/2000/svg" fill="none">
-    <path id="svg_1" fill="#313336" d="m4.58334,0l4.58332,4.41667l-9.16666,0l4.58334,-4.41667z" clip-rule="evenodd"
-        fill-rule="evenodd" />
-    <path id="svg_2" fill="#313336" d="m4.58335,10.83337l-4.58333,-4.4167l9.16664,0l-4.58331,4.4167z"
-        clip-rule="evenodd" fill-rule="evenodd" />
-
-</svg>

package/src/components/Icon/assets/upload.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M39.0129 20.0894H29.9817V36.097H19.0291V20.0894H9.01953L24.1351 5L39.0129 20.0894ZM9 40V44H39V40H9Z" />
-</svg>

package/src/components/Icon/assets/warning.svg

@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-  <path clip-rule="evenodd"
-    d="M3.79753 20.9444H20.2031C21.1809 20.9444 21.8064 19.9034 21.3454 19.0421L13.142 3.68477C12.655 2.77174 11.3443 2.77174 10.856 3.68477L2.65392 19.0421C2.19415 19.9034 2.8197 20.9444 3.79753 20.9444ZM10.7045 9.30522H13.2948V14.4782H10.7045V9.30522ZM11.9996 15.7715C12.7146 15.7715 13.2948 16.3508 13.2948 17.0647C13.2948 17.7786 12.7146 18.358 11.9996 18.358C11.2847 18.358 10.7045 17.7786 10.7045 17.0647C10.7045 16.3508 11.2847 15.7715 11.9996 15.7715Z" />
-</svg>

package/src/components/Icon/index.ts

@@ -1,2 +0,0 @@
-export { default as Icon } from './Icon'
-export type { IconProps } from './Icon'

package/src/components/IconFactory/IconFactory.fixtures.tsx

@@ -1,31 +0,0 @@
-import React, { SVGAttributes } from 'react'
-
-function Caret(props: SVGAttributes<HTMLOrSVGElement>): JSX.Element {
-  return (
-    <svg
-      fill="none"
-      viewBox="0 0 48 48"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      aria-label="caret"
-    >
-      <path d="M24 30L13 19H35L24 30Z" clipRule="evenodd" />
-    </svg>
-  )
-}
-
-export const icons = {
-  clubs: function ClubsIcon(): JSX.Element {
-    return <span aria-label="clubs">&clubs;</span>
-  },
-  spades: function SpadesIcon(): JSX.Element {
-    return <span aria-label="spades">&spades;</span>
-  },
-  diams: function SpadesIcon(): JSX.Element {
-    return <span aria-label="diams">&diams;</span>
-  },
-  hearts: function SpadesIcon(): JSX.Element {
-    return <span aria-label="hearts">&hearts;</span>
-  },
-  caret: Caret,
-}

package/src/components/IconFactory/IconFactory.stories.tsx

@@ -1,120 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-  PRIMARY_STORY,
-} from '@storybook/addon-docs'
-
-import { Themes } from 'theming'
-
-import { icons } from './IconFactory.fixtures'
-import IconFactory from './IconFactory'
-import type { IconProps } from './IconFactory'
-
-const Icon = IconFactory(icons)
-
-const colors = Object.keys(Themes.Alice)
-  .filter((token) => token.startsWith('color-'))
-  .map((color) => color.replace('color-', ''))
-
-export default {
-  title: 'Components/IconFactory',
-  component: Icon,
-  argTypes: {
-    name: {
-      control: {
-        type: 'select',
-        options: Object.keys(icons),
-      },
-    },
-    color: {
-      control: {
-        type: 'select',
-        options: colors,
-      },
-    },
-    size: {
-      control: {
-        type: 'text',
-      },
-    },
-    height: {
-      control: {
-        type: 'text',
-      },
-    },
-    width: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      page: function CustomizedStory() {
-        return (
-          <>
-            <Title />
-            <Subtitle />
-            <Description />
-            <p className="my-4">This component is just a wrapper for a given set of icons.</p>
-
-            <pre className="font-mono text-sm text-neutral-dark">
-              <code>
-                {`const Icon = IconFactory({
-                    clubs: function ClubsIcon(): JSX.Element {
-                      return <span aria-label="clubs">&clubs;</span>
-                    },
-                    spades: function SpadesIcon(): JSX.Element {
-                      return <span aria-label="spades">&spades;</span>
-                    },
-                    diams: function SpadesIcon(): JSX.Element {
-                      return <span aria-label="diams">&diams;</span>
-                    },
-                    hearts: function SpadesIcon(): JSX.Element {
-                      return <span aria-label="hearts">&hearts;</span>
-                    },
-                  })`}
-              </code>
-            </pre>
-
-            <p className="my-4">
-              From there, your icons will be available using the names you used to map them.
-            </p>
-
-            <pre className="font-mono text-sm text-neutral-dark">
-              <code>{`<Icon name="hearts" />`}</code>
-            </pre>
-
-            <Primary />
-            <ArgsTable story={PRIMARY_STORY} />
-            <Stories />
-          </>
-        )
-      },
-    },
-  },
-} as Meta
-
-export const Playground: Story<IconProps<typeof icons>> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center">
-        <Icon {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  name: 'clubs',
-  size: '1em',
-  width: '1em',
-  height: '1em',
-  color: 'neutral-darker',
-}

package/src/components/IconFactory/IconFactory.test.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import { icons } from './IconFactory.fixtures'
-import * as stories from './IconFactory.stories'
-import generator from '../../tests/generator'
-import renderer, { screen } from '../../tests/renderer'
-
-import type { IconProps } from './IconFactory'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<IconProps<typeof icons>>) =>
-  renderer(<Playground {...overrides} />).render()
-
-describe('IconFactory', () => {
-  it('renders correctly', () => {
-    const props = {
-      name: generator.pick(Object.keys(icons), { amount: 1 }) as keyof typeof icons,
-    }
-
-    setup(props)
-
-    screen.getByLabelText(props.name)
-  })
-
-  it('renders `UnknownIcon` when the provided icon name is not mapped', () => {
-    const props = {
-      name: generator.word() as keyof typeof icons,
-    }
-
-    setup(props)
-
-    screen.getByLabelText(/unknown icon/i)
-  })
-})

package/src/components/IconFactory/IconFactory.tsx

@@ -1,75 +0,0 @@
-import React, { ReactNode, ComponentType, type ReactElement } from 'react'
-import styled from 'styled-components'
-
-import transition from 'styles/transition'
-import { getToken as token } from 'theming'
-
-import type { ThemeToken } from 'theming'
-
-type ThemeColors = keyof {
-  [ColorToken in ThemeToken as ColorToken extends `color-${infer Token}`
-    ? Token
-    : never]: ColorToken
-}
-
-const Wrapper = styled.span<{ $color?: ThemeColors }>`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  &,
-  & > svg {
-    ${transition({
-      property: 'transform',
-    })}
-
-    /*
-     * prop('$color', 'currentColor')
-     * Not using the prop helper function since we can't return
-     * an evaluated token from it
-     */
-    color: ${(props) =>
-      props.$color ? token(`color-${props.$color}` as ThemeToken, props) : 'currentColor'};
-
-    fill: currentColor;
-  }
-`
-
-export interface IconProps<T> {
-  name: keyof T
-  size?: string | number
-  width?: string | number
-  height?: string | number
-  className?: string
-  color?: ThemeColors
-}
-
-export type IconMapping = Record<string, ReactElement | ((props: never) => ReactElement)>
-
-export function UnknownIcon(): ReactElement {
-  return <span aria-label="Unknown icon">&#9785;</span>
-}
-
-function IconFactory(map: IconMapping): ComponentType<IconProps<typeof map>> {
-  function getIcon(name: keyof typeof map): ReactNode | null {
-    // eslint-disable-next-line no-param-reassign
-    name = String(name || '').toLowerCase()
-
-    if (!(name in map)) return UnknownIcon
-
-    return map[name]
-  }
-
-  return function Icon(props: IconProps<typeof map>) {
-    const { name, size, width = '1em', height = '1em', className, color, ...rest } = props
-
-    const I = getIcon(name) as typeof React.Component
-    return (
-      <Wrapper className={className} $color={color}>
-        <I width={size || width} height={size || height} {...rest} />
-      </Wrapper>
-    )
-  }
-}
-
-export default IconFactory

package/src/components/IconFactory/index.ts

@@ -1,2 +0,0 @@
-export { default as IconFactory } from './IconFactory'
-export type { IconProps, IconMapping } from './IconFactory'

package/src/components/Label/Label.stories.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import Label, { LabelProps } from './Label'
-import type { Meta } from '@storybook/react'
-
-export default {
-  title: 'Components/Label',
-  component: Label,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: LabelProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex flex-col items-start p-4 space-y-2">
-        <Label {...args} />
-        <input
-          type="text"
-          className="p-2 text-sm transition-colors border rounded outline-none focus:border-primary-500 border-neutral-darker"
-        />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  children: 'Name',
-  disabled: false,
-  tip: 'Typing your first name is enough.',
-  required: true,
-  scheme: 'light',
-}

package/src/components/Label/Label.test.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-
-import Label from './Label'
-import generator from '../../tests/generator'
-import renderer from '../../tests/renderer'
-
-const setup = ({ ...overrides }) => renderer(<Label {...overrides} />).render()
-
-describe('<Label />', () => {
-  it('renders correctly', () => {
-    const props = {
-      children: generator.word(),
-    }
-
-    setup(props)
-
-    screen.getByText(props.children)
-  })
-
-  it('renders correctly when disabled', () => {
-    const props = {
-      children: generator.word(),
-      disabled: true,
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('label')).toHaveClass('is-disabled')
-  })
-
-  it('renders required indicator', () => {
-    const props = {
-      children: generator.word(),
-      required: true,
-    }
-
-    setup(props)
-
-    screen.getByText(props.children)
-    screen.getByText('*', { selector: 'sup' })
-  })
-
-  it('renders tip', () => {
-    const props = {
-      children: generator.word(),
-      tip: generator.sentence(),
-    }
-
-    setup(props)
-
-    const tipAnchor = screen.getByText('?', { selector: 'span' })
-    expect(screen.queryByText(/`${props.message}`/i)).not.toBeInTheDocument()
-
-    userEvent.hover(tipAnchor)
-    screen.getByText(props.tip)
-  })
-
-  it('renders node tip', () => {
-    const sentence = generator.sentence()
-    const props = {
-      children: generator.word(),
-      tip: (
-        <div data-testid="tip-div-id">
-          <b>{sentence}</b>
-        </div>
-      ),
-    }
-
-    setup(props)
-
-    const tipAnchor = screen.getByText('?', { selector: 'span' })
-    expect(screen.queryByText(/`${props.message}`/i)).not.toBeInTheDocument()
-
-    userEvent.hover(tipAnchor)
-    expect(screen.getByTestId('tip-div-id')).toBeInTheDocument()
-    screen.getByText(sentence)
-  })
-})