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

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -1,368 +0,0 @@
-import React, { useContext } from 'react'
-import clsx from 'clsx'
-import styled, { css } from 'styled-components'
-import { isFunction } from '@loadsmart/utils-function'
-
-import { BaseButton, SelectorButton, ButtonProps } from 'components/Button'
-import { getToken as token } from 'theming'
-import { Icon as DefaultIcon } from 'components/Icon'
-import { useFocusWithin } from 'hooks/useFocusWithin'
-import activatable from 'styles/activatable'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import DropdownContext from './Dropdown.context'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import transition from 'styles/transition'
-import typography from 'styles/typography'
-
-import type { ButtonHTMLAttributes, HTMLAttributes, MouseEvent } from 'react'
-import type { DropdownTriggerProps, DropdownContextReturn } from './Dropdown.types'
-import type { IconProps } from 'components/Icon'
-import type ColorScheme from 'utils/types/ColorScheme'
-import { Popover } from 'components/Popover'
-
-/**
- * TODO: throw an error if context is not available
- */
-
-type DropdownTriggerWrapperProps = {
-  disabled: boolean
-  scheme: ColorScheme
-  $outlined: boolean
-  $scale: DropdownTriggerProps['scale']
-}
-
-type TriggerButtonProps = ButtonProps & {
-  outlined: boolean
-}
-
-const dropdownExpandedStyle = css`
-  &[aria-expanded='true'] {
-    color: ${token('dropdown-trigger-expanded-color')};
-  }
-`
-
-const triggerButtonAttrs = (props: { outlined: boolean }) => {
-  const outlined = typeof props.outlined === 'boolean' ? props.outlined : true
-  if (outlined) {
-    return props
-  }
-
-  return {
-    ...props,
-    variant: 'tertiary',
-  }
-}
-
-const TriggerButton = styled(
-  SelectorButton as React.ForwardRefExoticComponent<TriggerButtonProps>
-).attrs(triggerButtonAttrs)`
-  flex: 1;
-
-  justify-content: flex-start;
-
-  border: none;
-
-  height: ${token('dropdown-trigger-height')};
-
-  text-transform: ${conditional({
-    capitalize: whenProps({ outlined: false, variant: 'tertiary' }),
-    uppercase: whenProps({ outlined: true }),
-  })};
-
-  font-weight: ${conditional({
-    'font-weight-regular': whenProps({ outlined: false }),
-  })};
-
-  ${hoverable`
-      border-color: ${conditional({
-        'color-transparent': whenProps({ outlined: false }),
-      })};
-
-      font-weight: ${conditional({
-        'font-weight-bold': whenProps({ outlined: false }),
-      })};
-
-      ${dropdownExpandedStyle}
-    `}
-
-  ${focusable`
-      box-shadow: ${conditional({
-        none: whenProps({ outlined: false }),
-      })};
-
-      background-color: ${conditional({
-        'color-transparent': whenProps({ outlined: false }),
-      })};
-
-      font-weight: ${conditional({
-        'font-weight-bold': whenProps({ outlined: false }),
-      })};
-
-
-      ${dropdownExpandedStyle}
-    `}
-
-    ${({ children, outlined }) => {
-    if (outlined === false && typeof children === 'string') {
-      return css`
-        & > span:first-child {
-          display: inline-flex;
-          flex-direction: column;
-          align-items: center;
-          justify-content: space-between;
-
-          text-decoration: none;
-        }
-
-        & > span:first-child::after {
-          height: 0;
-          overflow: hidden;
-
-          font-weight: ${token('font-weight-bold')};
-
-          visibility: hidden;
-
-          /* @REVIEW: since this is a span descendant of a button
-          I'm using the direct value of children the solution inside Link
-          relies on data-text attribute */
-
-          content: '${children}';
-          content: '${children}' / '';
-          user-select: none;
-          pointer-events: none;
-
-          @media speech {
-            display: none;
-          }
-        }
-      `
-    }
-  }}
-`
-
-const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
-  ${transition()}
-
-  ${typography(
-    conditional({
-      'button-md': whenProps({ $scale: 'default' }),
-      'button-sm': whenProps({ $scale: 'small' }),
-      'button-lg': whenProps({ $scale: 'large' }),
-    })
-  )}
-
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-
-  border-radius: ${token('button-border-radius')};
-  border-width: ${token('button-border-width')};
-  border-style: solid;
-  border-color: ${conditional({
-    'dropdown-trigger-border-color': whenProps({ scheme: 'light', $outlined: true }),
-    'dropdown-trigger-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
-    'dropdown-trigger-outlined-border-color': whenProps({ $outlined: false }),
-  })};
-
-  font-size: ${token('font-size-4')};
-
-  color: ${token('color-neutral-darker')};
-
-  box-sizing: border-box;
-
-  flex: 1;
-
-  ${hoverable`
-    border-color: ${conditional({
-      'button-secondary-border-color--hover': whenProps({ scheme: 'light', $outlined: true }),
-      'button-secondary-dark-border-color--hover': whenProps({
-        scheme: 'dark',
-        $outlined: true,
-      }),
-    })};
-  `}
-
-  ${disableable`
-    border-color: ${conditional({
-      'button-secondary-border-color--disabled': whenProps({ scheme: 'light' }),
-      'button-secondary-dark-border-color--disabled': whenProps({
-        scheme: 'dark',
-      }),
-    })};
-  `}
-
-  ${focusable`
-    border-color: ${conditional({
-      'button-primary-border-color--focus': whenProps({ variant: 'primary', $outlined: true }),
-      'button-secondary-border-color--focus': whenProps({ scheme: 'light', $outlined: true }),
-      'button-secondary-dark-border-color--focus': whenProps({
-        scheme: 'dark',
-        $outlined: true,
-      }),
-      'button-warning-border-color--focus': whenProps({ variant: 'warning', $outlined: true }),
-      'button-icon-border-color--focus': whenProps({ variant: 'icon', $outlined: true }),
-      'color-transparent': whenProps({ $outlined: false }),
-    })};
-
-    box-shadow: ${conditional({ 'dropdown-trigger-box-shadow': whenProps({ $outlined: true }) })};
-    outline: ${token('dropdown-trigger-outline')};
-    outline-offset: ${token('dropdown-trigger-outline-offset')};
-  `}
-
-  ${activatable`
-    border-color: ${conditional({
-      'button-secondary-border-color--active': whenProps({ scheme: 'light', $outlined: true }),
-      'button-secondary-dark-border-color--active': whenProps({
-        scheme: 'dark',
-        $outlined: true,
-      }),
-    })};
-  `}
-`
-
-const TriggerHandle = styled(BaseButton)`
-  ${focusable()}
-
-  background: ${token('color-transparent')};
-  border-radius: 0 ${token('border-radius-s')} ${token('border-radius-s')} 0;
-  border: none;
-
-  height: ${token('dropdown-trigger-height')};
-`
-
-const RotatableIcon = styled(DefaultIcon)<{ $rotate: boolean }>`
-  ${conditional({
-    'transform: rotate(180deg);': whenProps({ $rotate: true }),
-  })}
-`
-
-export interface DropdownTriggerButtonProps extends DropdownTriggerProps {
-  children: DropdownTriggerProps['children'] | ((args: DropdownContextReturn) => React.ReactNode)
-}
-
-function Caret(props: Omit<IconProps, 'name'> & { $rotate: boolean }) {
-  return <RotatableIcon size={20} {...props} name="chevron-down" />
-}
-
-function DropdownTriggerButton(props: DropdownTriggerButtonProps): JSX.Element {
-  const contextValue = useContext(DropdownContext)
-  const { toggle, disabled, expanded } = contextValue
-  const { children, onClick, ...others } = props
-
-  function handleClick(e: MouseEvent<HTMLButtonElement>) {
-    e.persist()
-
-    toggle()
-    onClick?.(e)
-  }
-
-  function renderChildren() {
-    if (isFunction(children)) {
-      return children(contextValue)
-    }
-
-    return children
-  }
-
-  // TODO: add aria-labelledby that should refer to the button and the dropdown label
-  return (
-    <TriggerButton
-      trailing={<Caret $rotate={expanded} />}
-      onClick={handleClick}
-      {...others}
-      type="button"
-      aria-haspopup="true"
-      aria-expanded={expanded}
-      aria-disabled={disabled}
-      disabled={disabled}
-    >
-      {renderChildren()}
-    </TriggerButton>
-  )
-}
-
-function DropdownTriggerHandle(props: ButtonHTMLAttributes<HTMLButtonElement>): JSX.Element {
-  const { toggle, expanded, disabled, expandDisabled } = useContext(DropdownContext)
-  const { onClick, ...others } = props
-
-  function handleClick(e: MouseEvent<HTMLButtonElement>) {
-    e.persist()
-
-    toggle()
-    onClick?.(e)
-  }
-
-  return (
-    <TriggerHandle
-      onClick={handleClick}
-      data-testid="dropdown-trigger-handle"
-      {...others}
-      disabled={disabled || expandDisabled}
-      type="button"
-      tabIndex={-1}
-    >
-      <Caret $rotate={expanded} />
-    </TriggerHandle>
-  )
-}
-
-export interface GenericDropdownTriggerProps extends HTMLAttributes<HTMLDivElement> {
-  disabled?: boolean
-  scheme?: ColorScheme
-  outlined?: boolean
-  scale?: DropdownTriggerProps['scale']
-}
-
-export function GenericDropdownTrigger(props: GenericDropdownTriggerProps): JSX.Element {
-  const context = useContext(DropdownContext)
-  const { ref, focused } = useFocusWithin<HTMLDivElement>()
-
-  if (!context) {
-    throw new Error('DropdownTrigger must be inside a DropdownContext')
-  }
-
-  const { children, className, scheme = 'light', outlined = true, scale, ...others } = props
-  const { disabled } = context
-
-  return (
-    <DropdownTriggerWrapper
-      role="presentation"
-      {...others}
-      ref={ref}
-      className={clsx(
-        {
-          'is-disabled': disabled,
-          'is-focused': focused,
-        },
-        className
-      )}
-      disabled={disabled}
-      scheme={scheme}
-      $scale={scale}
-      $outlined={outlined}
-    >
-      {children}
-    </DropdownTriggerWrapper>
-  )
-}
-
-function DropdownTrigger(props: DropdownTriggerProps): JSX.Element {
-  const { children, className, ...others } = props
-
-  return (
-    <Popover.Reference>
-      <GenericDropdownTrigger className={className} outlined={props.outlined} scale={props.scale}>
-        <DropdownTriggerButton {...others} data-text={children}>
-          {children}
-        </DropdownTriggerButton>
-      </GenericDropdownTrigger>
-    </Popover.Reference>
-  )
-}
-
-DropdownTrigger.Button = DropdownTriggerButton
-DropdownTrigger.Handle = DropdownTriggerHandle
-
-export default DropdownTrigger

package/src/components/Dropdown/index.ts

@@ -1,15 +0,0 @@
-export { default as Dropdown, GenericDropdown } from './Dropdown'
-export { default as DropdownContext } from './Dropdown.context'
-export { default as DropdownTrigger, GenericDropdownTrigger } from './DropdownTrigger'
-export { DropdownMenu, DropdownMenuItem } from './DropdownMenu'
-export { default as useDropdown } from './useDropdown'
-
-export type {
-  DropdownMenuItemProps,
-  DropdownMenuProps,
-  DropdownMenuSectionProps,
-  DropdownProps,
-  DropdownTriggerProps,
-  GenericDropdownProps,
-  useDropdownProps,
-} from './Dropdown.types'

package/src/components/Dropdown/useDropdown.test.ts

@@ -1,96 +0,0 @@
-import { renderHook, act } from '@testing-library/react-hooks'
-
-import useDropdown from './useDropdown'
-
-describe('useDropdown', () => {
-  it('starts collapsed', () => {
-    const { result } = renderHook(() => useDropdown({}))
-
-    expect(result.current.expanded).toBe(false)
-  })
-
-  describe('when enabled', () => {
-    it('toggles expanded correctly', () => {
-      const props = {
-        disabled: false,
-      }
-
-      const { result } = renderHook(() => useDropdown(props))
-
-      expect(result.current.expanded).toBe(false)
-
-      act(() => {
-        result.current.toggle()
-      })
-
-      expect(result.current.expanded).toBe(true)
-    })
-
-    it('expands correctly', () => {
-      const props = {
-        disabled: false,
-      }
-
-      const { result } = renderHook(() => useDropdown(props))
-
-      expect(result.current.expanded).toBe(false)
-
-      act(() => {
-        result.current.expand()
-      })
-
-      expect(result.current.expanded).toBe(true)
-    })
-
-    it('collapses correctly', () => {
-      const props = {
-        disabled: false,
-      }
-
-      const { result } = renderHook(() => useDropdown(props))
-
-      expect(result.current.expanded).toBe(false)
-
-      act(() => {
-        result.current.expand()
-        result.current.collapse()
-      })
-
-      expect(result.current.expanded).toBe(false)
-    })
-  })
-
-  describe('when disabled', () => {
-    it('does not toggle', () => {
-      const props = {
-        disabled: true,
-      }
-
-      const { result } = renderHook(() => useDropdown(props))
-
-      expect(result.current.expanded).toBe(false)
-
-      act(() => {
-        result.current.toggle()
-      })
-
-      expect(result.current.expanded).toBe(false)
-    })
-
-    it('does not expand', () => {
-      const props = {
-        disabled: true,
-      }
-
-      const { result } = renderHook(() => useDropdown(props))
-
-      expect(result.current.expanded).toBe(false)
-
-      act(() => {
-        result.current.expand()
-      })
-
-      expect(result.current.expanded).toBe(false)
-    })
-  })
-})

package/src/components/Dropdown/useDropdown.ts

@@ -1,65 +0,0 @@
-import { useCallback, useEffect, useState } from 'react'
-
-import type { DropdownProps } from './Dropdown.types'
-
-export interface useDropdownProps {
-  expanded: boolean
-  toggle: () => void
-}
-
-export interface GenericDropdownProps extends DropdownProps, useDropdownProps {}
-
-function useDropdown({ disabled, expandDisabled }: DropdownProps): {
-  expanded: boolean
-  toggle: () => void
-  expand: () => void
-  collapse: () => void
-} {
-  const [expanded, setExpanded] = useState(false)
-
-  const toggle = useCallback(
-    function toggle() {
-      if (disabled || expandDisabled) {
-        return
-      }
-
-      setExpanded((isExpanded) => !isExpanded)
-    },
-    [disabled, expandDisabled]
-  )
-
-  const expand = useCallback(
-    function toggle() {
-      if (disabled || expandDisabled) {
-        return
-      }
-
-      setExpanded(true)
-    },
-    [disabled, expandDisabled]
-  )
-
-  const collapse = useCallback(
-    function toggle() {
-      if (disabled || expandDisabled) {
-        return
-      }
-
-      setExpanded(false)
-    },
-    [disabled, expandDisabled]
-  )
-
-  useEffect(
-    function closeWhenDisabled() {
-      if ((disabled || expandDisabled) && expanded) {
-        setExpanded(false)
-      }
-    },
-    [disabled, expandDisabled, expanded]
-  )
-
-  return { expanded, toggle, expand, collapse }
-}
-
-export default useDropdown

package/src/components/EmptyState/EmptyState.mocks.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-
-import type {
-  EmptyStateProps,
-  EmptyStateCommonProps,
-  EmptyStateWithIllustrationProps,
-  EmptyStateWithIconProps,
-} from './EmptyState.types'
-import { Icon } from 'components/Icon'
-
-const baseCommonProps: EmptyStateCommonProps = {
-  title: 'Short intuitive and friendly title',
-  action: {
-    label: 'Call to action',
-    onClick: () => {
-      /**/
-    },
-  },
-}
-
-const basePropsWithIllustration: EmptyStateProps = {
-  ...baseCommonProps,
-  variant: 'page',
-  illustration: 'https://loadsmart.com/images/home/menu/nav-warehouses.jpg',
-  description: 'Body text, which adds details and engages the user. Shorter than a tweet.',
-}
-
-export const emptyStatePageProps: EmptyStateWithIllustrationProps = {
-  ...basePropsWithIllustration,
-  variant: 'page',
-}
-
-export const emptyStatePageWithIllustrationElementProps: EmptyStateWithIllustrationProps = {
-  ...basePropsWithIllustration,
-  illustration: <Icon name="information" size={240} data-testid="information-svg" />,
-  variant: 'page',
-}
-
-export const emptyStatePanelProps: EmptyStateWithIllustrationProps = {
-  ...basePropsWithIllustration,
-  variant: 'panel',
-}
-
-export const emptyStatePanelWithIllustrationElementProps: EmptyStateWithIllustrationProps = {
-  ...basePropsWithIllustration,
-  illustration: <Icon name="information" size={120} data-testid="information-svg" />,
-  variant: 'panel',
-}
-
-export const emptyStateCardProps: EmptyStateWithIconProps = {
-  ...baseCommonProps,
-  variant: 'card',
-  icon: <Icon name="information" size={36} data-testid="information-svg" />,
-}
-
-export const emptyStateHorizontalCardProps: EmptyStateWithIconProps = {
-  ...baseCommonProps,
-  variant: 'horizontal-card',
-  icon: <Icon name="information" size={24} data-testid="information-svg" />,
-}