@loadsmart/loadsmart-ui 5.10.0 → 5.11.0

package/src/components/ToggleGroup/Toggle.tsx

@@ -14,6 +14,13 @@ import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
 import type { ToggleGroupOptionProps, ToggleGroupType } from './ToggleGroup.types'
 
 const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
+  padding: ${token('space-xs')} ${token('space-s')};
+
+  color: ${conditional({
+    'color-neutral-darker': whenProps({ 'aria-checked': false }),
+    'color-neutral-white': whenProps({ 'aria-checked': true }),
+  })};
+
   background: ${conditional({
     'color-transparent': whenProps({ 'aria-checked': false }),
     'color-neutral-darkest': whenProps({ 'aria-checked': true }),
@@ -27,13 +34,6 @@ const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
     'color-transparent': whenProps({ $type: 'single', 'aria-checked': false }),
   })};
 
-  color: ${conditional({
-    'color-neutral-darker': whenProps({ 'aria-checked': false }),
-    'color-neutral-white': whenProps({ 'aria-checked': true }),
-  })};
-
-  padding: ${token('space-xs')} ${token('space-s')};
-
   ${hoverable`
     border-color: ${conditional({
       'color-neutral-dark': whenProps({ $type: 'multiple' }),

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import { Icon } from '../Icon'
 import { Label } from '../Label'

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -3,8 +3,8 @@ import { composeStories } from '@storybook/testing-react'
 
 import { OPTIONS } from './ToggleGroup.constants'
 import * as stories from './ToggleGroup.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import type { ToggleGroupProps, ToggleGroupOptionProps } from './ToggleGroup.types'
 

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Tooltip, { TooltipAlign, TooltipPosition, TooltipProps } from './Tooltip'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 export default {
   title: 'Components/Tooltip',

package/src/components/Tooltip/Tooltip.test.tsx

@@ -3,8 +3,8 @@ import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import Tooltip from './Tooltip'
-import generator from '../../../tests/generator'
-import renderer from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Tooltip message="" {...overrides} />).render()
 

package/src/components/Tooltip/Tooltip.tsx

@@ -1,7 +1,8 @@
-import React, { HTMLAttributes, PropsWithChildren, ReactNode, useCallback, useState } from 'react'
+import React, { HTMLAttributes, ReactNode, useCallback, useState } from 'react'
+import type { PropsWithChildren } from 'react'
 import styled, { css } from 'styled-components'
 
-import ColorScheme from 'utils/types/ColorScheme'
+import type ColorScheme from 'utils/types/ColorScheme'
 import focusable from 'styles/focusable'
 import transition from 'styles/transition'
 import font from 'styles/font'
@@ -31,10 +32,10 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
 type ContainerProps = Pick<TooltipProps, 'scheme'>
 
 const Container = styled.div<ContainerProps>`
-  display: inline-block;
-
   position: relative;
 
+  display: inline-block;
+
   cursor: help;
 
   ${focusable`
@@ -48,31 +49,22 @@ const Container = styled.div<ContainerProps>`
 type BubbleProps = Pick<TooltipProps, 'position' | 'align'>
 
 const Bubble = styled.span<BubbleProps>`
-  ${font({
-    weight: 'font-weight-medium',
-    height: 'font-height-3',
-  })}
-
-  ${transition()}
-
-  white-space: initial;
-
-  min-width: ${token('tooltip-min-width')};
-  max-width: ${token('tooltip-max-width')};
-  width: max-content;
-
   position: absolute;
   z-index: ${token('z-index-tooltip')};
 
-  background: ${token('tooltip-background')};
-  box-shadow: ${token('tooltip-shadow')};
-  border-radius: ${token('tooltip-border-radius')};
+  width: max-content;
+  min-width: ${token('tooltip-min-width')};
+  max-width: ${token('tooltip-max-width')};
 
   padding: ${token('tooltip-padding-y')} ${token('tooltip-padding-x')};
 
-  color: ${token('tooltip-color')};
   font-size: ${token('tooltip-font-size')};
   line-height: ${token('tooltip-font-height')};
+  color: ${token('tooltip-color')};
+  white-space: initial;
+  background: ${token('tooltip-background')};
+  border-radius: ${token('tooltip-border-radius')};
+  box-shadow: ${token('tooltip-shadow')};
 
   ${({ position }) =>
     position === TooltipPosition.Top &&
@@ -117,19 +109,26 @@ const Bubble = styled.span<BubbleProps>`
 
       transform: translate(100%, -50%);
     `};
+
+  ${font({
+    weight: 'font-weight-medium',
+    height: 'font-height-3',
+  })}
+
+  ${transition()}
 `
 
 type ArrowProps = Pick<TooltipProps, 'position'>
 const Arrow = styled.span<ArrowProps>`
+  position: absolute;
+  z-index: 1;
+
   width: 0;
   height: 0;
 
   background: transparent;
   border-style: solid;
 
-  position: absolute;
-  z-index: 1;
-
   ${({ position }) =>
     position === TooltipPosition.Top &&
     css`

package/src/components/TopNavigation/Logo/Logo.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { Logo } from './'
 import type { LogoProps } from './Logo'
-import renderer, { screen } from '../../../../tests/renderer'
-import generators from '../../../../tests/generator'
+import renderer, { screen } from '../../../tests/renderer'
+import generators from '../../../tests/generator'
 
 function setup(props: LogoProps) {
   return renderer(<Logo {...props} />).render()

package/src/components/TopNavigation/Menu/Menu.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ThemeProvider } from 'styled-components'
-import renderer, { screen, user } from '../../../../tests/renderer'
+import renderer, { screen, user } from '../../../tests/renderer'
 import { Menu } from './'
 import type { MenuProps } from './Menu'
 import { Alice } from '../../../theming/themes'

package/src/components/TopNavigation/Menu/MenuItemDropdown.tsx

@@ -27,8 +27,8 @@ const MenuDropdownTrigger = styled(DropdownTrigger.Handle)`
 export const MenuDropdownLabel = styled.label`
   ${transition()}
 
-  align-items: center;
   display: flex;
+  align-items: center;
 
   ${typography('body-bold', { color: 'top-navigation-item-color' })}
 

package/src/components/TopNavigation/OpenSideNavButton/OpenSideNavButton.tsx

@@ -11,10 +11,10 @@ export type OpenSideNavButtonProps = {
 
 const Container = styled.button`
   margin-right: ${token('space-2xl')};
+  cursor: pointer;
 
   background: none;
   border: none;
-  cursor: pointer;
 `
 
 function OpenSideNavButton({ className, onClick }: OpenSideNavButtonProps): JSX.Element {

package/src/components/VisuallyHidden/VisuallyHidden.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 
 import hiddenStyle from 'styles/hidden'
 import { VisuallyHidden } from './VisuallyHidden'

package/src/hooks/useClickOutside/useClickOutside.test.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import useClickOutside from './useClickOutside'
 interface ExperimentProps {

package/src/hooks/useDidMount/useDidMount.test.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 import useDidMount from './useDidMount'
 
 function Experiment() {

package/src/hooks/useFocusTrap/useFocusTrap.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import clsx from 'clsx'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import range from 'utils/toolset/range'
 import useFocusTrap from './useFocusTrap'

package/src/hooks/useFocusTrap/useFocusTrap.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import renderer, { screen, fire, user } from '../../../tests/renderer'
+import renderer, { screen, fire, user } from '../../tests/renderer'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './useFocusTrap.stories'

package/src/hooks/useFocusWithin/useFocusWithin.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import useFocusWithin from './useFocusWithin'
 

package/src/hooks/useHeightExpansionToggler/useHeightExpansionToggler.test.tsx

@@ -1,7 +1,7 @@
 import { act, waitFor } from '@testing-library/react'
 import React, { useRef, useState } from 'react'
 
-import renderer, { screen, fire, user } from '../../../tests/renderer'
+import renderer, { screen, fire, user } from '../../tests/renderer'
 
 import useHeightExpansionToggler from './useHeightExpansionToggler'
 

package/src/hooks/useHeightExpansionToggler/useHeightExpansionToggler.ts

@@ -1,5 +1,5 @@
 import { RefObject, useEffect, useLayoutEffect, useReducer, useState } from 'react'
-import { CSSProperties } from 'styled-components'
+import type { CSSProperties } from 'styled-components'
 
 import { useDidMount } from 'hooks/useDidMount'
 

package/src/hooks/useSelectable/SelectableStrategy.test.ts

@@ -1,4 +1,4 @@
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 import createSelectionStrategy from './SelectableStrategy'
 
 import type { Selectable, SelectableAdapter, SelectableKeyType } from './useSelectable.types'

package/src/hooks/useSelectable/useSelectable.test.ts

@@ -1,7 +1,7 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
 import { createSelectable } from './useSelectable'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 import type { Selectable, SelectableAdapter, SelectableKeyType } from './useSelectable.types'
 

package/src/styles/activatable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import interleave from 'utils/toolset/interleave'
-import { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
+import type { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
 
 /**
  * Add basic CSS style wrapping block for `:active` state.

package/src/styles/disableable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import interleave from 'utils/toolset/interleave'
-import { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
+import type { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
 
 /**
  * Add basic CSS style wrapping block for `:disabled` state or `.is-disabled` class.

package/src/styles/focusable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import interleave from 'utils/toolset/interleave'
-import { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
+import type { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
 /**
  * Add basic CSS style wrapping block for `:active` state.
  * It returns an array to allow handling of nested interpolation

package/src/styles/font.tsx

@@ -26,11 +26,11 @@ function fontStyle({
   transform = 'none',
 }: FontStyleOptions): FlattenInterpolation<ThemedProps> {
   return css`
-    color: ${getToken(color)};
-    font-weight: ${getToken(weight)};
-    font-size: ${getToken(size)};
     font-family: ${getToken(family)};
+    font-size: ${getToken(size)};
+    font-weight: ${getToken(weight)};
     line-height: ${getToken(height)};
+    color: ${getToken(color)};
     text-transform: ${transform};
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

package/src/styles/hoverable.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import interleave from 'utils/toolset/interleave'
-import { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
+import type { InterpolatedStyle } from 'utils/types/InterpolatedStyle'
 
 /**
  * Add basic CSS style wrapping block for `:hover` state; it includes check for non-disabled (`:enabled` or not `.is-disabled`) elements.

package/src/testing/SelectEvent/SelectEvent.test.tsx

@@ -7,8 +7,8 @@ import {
   useSyncFruits,
   useAsyncUsers,
 } from '../../components/Select/Select.fixtures'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 import Select from '../../components/Select/Select'
 
 import selectEvent from './SelectEvent'

package/src/testing/getInterpolatedStyles/getInterpolatedStyles.ts

@@ -1,4 +1,4 @@
-import { Interpolation, ThemeProps } from 'styled-components'
+import type { Interpolation, ThemeProps } from 'styled-components'
 import { isFunction } from '@loadsmart/utils-function'
 
 import { Alice } from '../../theming/themes'

package/src/tests/generator.ts

@@ -0,0 +1,127 @@
+import Chance from 'chance'
+import { nanoid } from 'nanoid'
+
+const chance = new Chance()
+
+/**
+ * Generates an array of `amount` (or  random) length, based on the given
+ * template function.
+ * The template function receives as named parameter the current `index`.
+ * @param {Function} template Template function to generate one item
+ * @param {number} amount Amount of items to be generated. If none is provide,
+ * then a random amount is generated.
+ * @returns {Array} Returns an array of lenght `amount`, with items
+ * generated based on the provided `template`.
+ */
+function generateArray<T>(
+  template: ({ index }: { index: number }) => T,
+  amount?: number
+): Array<T> {
+  const safeAmount = amount || chance.integer({ min: 5, max: 10 })
+
+  const data = []
+  for (let i = 0; i < safeAmount; i++) {
+    const item = template({ index: i })
+    data.push(item)
+  }
+
+  return data
+}
+
+function generatePick<T>(
+  array: Array<T>,
+  options?: { amount: number; allowRepeat?: boolean }
+): T | Array<T> {
+  const { amount = 1, allowRepeat = true } = options || {}
+
+  if (amount === 1) {
+    return chance.pickone(array)
+  }
+
+  let picked = chance.pickset(array, amount)
+
+  if (!allowRepeat) {
+    picked = Array.from(new Set(picked))
+  }
+
+  return picked
+}
+
+function generateDate(overrides: { month?: number; day?: number; year?: number } = {}): string {
+  const month = String(overrides.month ?? chance.natural({ min: 1, max: 12 })).padStart(2, '0')
+  const day = String(overrides.day ?? chance.natural({ min: 1, max: 28 })).padStart(2, '0')
+  const year = overrides.year ?? new Date().getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+
+function generateTime(opts?: Chance.Options): string {
+  const hour = String(chance.hour({ twentyfour: true, ...opts })).padStart(2, '0')
+  const minute = String(chance.minute()).padStart(2, '0')
+
+  return `${hour}:${minute}`
+}
+
+function generateUsername(): string {
+  const name = chance.name()
+  return name.replace(/^\s+|\s+$/g, '').toLowerCase()
+}
+
+function generateID(): string {
+  return nanoid()
+}
+
+interface DataGenerator {
+  animal: () => string
+  array: <T>(template: ({ index }: { index: number }) => T, amount?: number) => Array<T>
+  boolean: () => boolean
+  company: () => string
+  date: () => string
+  float: (opts?: Chance.Options) => number
+  id: () => string
+  name: (opts?: Chance.Options) => string
+  natural: (opts?: Chance.Options) => number
+  paragraph: (opts?: Chance.Options) => string
+  /**
+   * @deprecated Use pickone or pickset
+   */
+  pick: <T>(array: Array<T>, options?: { amount: number; allowRepeat?: boolean }) => T | Array<T>
+  pickone<T>(arr: T[]): T
+  pickset<T>(arr: T[], count?: number): T[]
+  profession: () => string
+  sentence: (opts?: Chance.Options) => string
+  state: (opts?: Chance.Options) => string
+  time: (opts?: Chance.Options) => string
+  token: () => string
+  url: () => string
+  username: () => string
+  word: (opts?: Chance.Options) => string
+  dollar: () => string
+}
+
+const generators: DataGenerator = {
+  animal: chance.animal.bind(chance),
+  array: generateArray,
+  boolean: chance.bool.bind(chance),
+  company: chance.company.bind(chance),
+  date: generateDate,
+  float: chance.floating.bind(chance),
+  id: generateID,
+  name: chance.name.bind(chance),
+  natural: chance.natural.bind(chance),
+  paragraph: chance.paragraph.bind(chance),
+  pick: generatePick,
+  pickone: chance.pickone.bind(chance),
+  pickset: chance.pickset.bind(chance),
+  profession: chance.profession.bind(chance),
+  sentence: chance.sentence.bind(chance),
+  state: chance.state.bind(chance),
+  time: generateTime,
+  token: chance.animal.bind(chance),
+  url: chance.url.bind(chance),
+  username: generateUsername,
+  word: chance.word.bind(chance),
+  dollar: chance.dollar.bind(chance),
+}
+
+export default generators

package/src/tests/renderer.tsx

@@ -0,0 +1,39 @@
+import {
+  render,
+  fireEvent,
+  RenderOptions,
+  within,
+  waitFor,
+  waitForElementToBeRemoved,
+  act,
+  screen,
+  queries,
+} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+class Renderer {
+  result: React.ReactElement
+
+  constructor(children: React.ReactElement) {
+    this.result = children
+  }
+
+  render(options?: Omit<RenderOptions, 'queries'>) {
+    return render(this.result, options)
+  }
+}
+
+export default function customRenderer(children: React.ReactElement): Renderer {
+  return new Renderer(children)
+}
+
+export {
+  act,
+  fireEvent as fire,
+  queries,
+  screen,
+  userEvent as user,
+  waitFor,
+  waitForElementToBeRemoved,
+  within,
+}

package/src/theming/index.ts

@@ -1,6 +1,7 @@
-import { ThemeProps } from 'styled-components'
 import { isFunction } from '@loadsmart/utils-function'
-import ThemeAlice from './themes/alice.theme'
+
+import type { ThemeProps } from 'styled-components'
+import type ThemeAlice from './themes/alice.theme'
 
 export type ThemeToken = keyof typeof ThemeAlice
 export type ThemeTokenValue = string | number

package/src/tools/conditional.test.ts

@@ -1,5 +1,5 @@
 import conditional, { whenProps } from './conditional'
-import generator from '../../tests/generator'
+import generator from '../tests/generator'
 
 describe('conditional', () => {
   describe('whenProps', () => {

package/src/utils/toolset/interleave.test.ts

@@ -1,5 +1,5 @@
 import interleave from './interleave'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 function generateArray() {
   return generator.array(() => generator.natural({ min: 1, max: 999 }), 3)