@loadsmart/loadsmart-ui 5.10.0 → 5.11.0

package/src/components/Checkbox/Checkbox.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, InputHTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 
 import { Icon } from 'components/Icon'
-import ColorScheme from 'utils/types/ColorScheme'
+import type ColorScheme from 'utils/types/ColorScheme'
 import conditional, { whenProps } from 'tools/conditional'
 import disableable from 'styles/disableable'
 import focusable from 'styles/focusable'
@@ -21,45 +21,32 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Se
 const Check = styled(Icon)<SelectionStyleProps>`
   position: absolute;
   top: 50%;
-
   left: 50%;
-
-  transform: translate(-50%, -50%);
-
   pointer-events: none;
+  transform: translate(-50%, -50%);
 `
 
 const Selector = styled.input<SelectionStyleProps>`
-  ${transition()}
-
   display: inline-flex;
   flex-flow: row nowrap;
   align-items: center;
-
-  cursor: pointer;
-
-  appearance: none;
-
-  outline: none;
-
-  color: white;
-
-  height: ${token('checkbox-selector-size')};
   width: ${token('checkbox-selector-size')};
-
-  border-radius: ${token('checkbox-selector-border-radius')};
-  border-width: ${token('button-border-width')};
-  border-style: solid;
-
-  border-color: ${conditional({
-    'checkbox-selector-border-color': whenProps({ scheme: 'light' }),
-    'checkbox-dark-selector-border-color': whenProps({ scheme: 'dark' }),
-  })};
-
+  height: ${token('checkbox-selector-size')};
+  color: white;
+  cursor: pointer;
   background: ${conditional({
     'checkbox-selector-background': whenProps({ scheme: 'light' }),
     'checkbox-dark-selector-background': whenProps({ scheme: 'dark' }),
   })};
+  border-color: ${conditional({
+    'checkbox-selector-border-color': whenProps({ scheme: 'light' }),
+    'checkbox-dark-selector-border-color': whenProps({ scheme: 'dark' }),
+  })};
+  border-style: solid;
+  border-width: ${token('button-border-width')};
+  border-radius: ${token('checkbox-selector-border-radius')};
+  appearance: none;
+  outline: none;
 
   :checked {
     background-color: ${token('checkbox-selector-checked-background')};
@@ -129,6 +116,7 @@ const Selector = styled.input<SelectionStyleProps>`
 
     box-shadow: ${token('checkbox-selector-outline')};
   `}
+  ${transition()}
 `
 
 function Checkbox({

package/src/components/DatePicker/DatePicker.test.tsx

@@ -7,8 +7,8 @@ import { formatter } from './DatePicker'
 import { MonthHelper } from '../Calendar'
 import * as stories from './DatePicker.stories'
 import DateHelper, { TODAY } from '../Calendar/Date.helper'
-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 { DatePickerProps } from './DatePicker.types'
 import type { CalendarMonthAlias } from '../Calendar'

package/src/components/DatePicker/DateRangePicker.stories.tsx

@@ -6,6 +6,7 @@ import DateRangePicker from './DateRangePicker'
 
 import type { Story, Meta } from '@storybook/react/types-6-0'
 import type { DateRangePickerProps } from './DatePicker.types'
+import type { useCalendarProps } from 'components/Calendar'
 
 export default {
   title: 'Components/Date/DateRangePicker',
@@ -53,13 +54,15 @@ export const Playground: Story<DateRangePickerProps> = (args: DateRangePickerPro
   )
 }
 
+Playground.bind({})
+
 Playground.args = {
   id: 'playground-date-range-picker',
   name: 'playground-date-range-picker',
 }
 
 export const WithValue: Story<DateRangePickerProps> = (args: DateRangePickerProps) => {
-  const [value, setValue] = useState([
+  const [value, setValue] = useState<useCalendarProps['selected']>([
     DateHelper('December 17, 1995').toString(),
     DateHelper('December 22, 1995').toString(),
   ])
@@ -82,6 +85,8 @@ export const WithValue: Story<DateRangePickerProps> = (args: DateRangePickerProp
   )
 }
 
+WithValue.bind({})
+
 WithValue.args = {
   id: 'with-value-date-range-picker',
   name: 'with-value-date-range-picker',

package/src/components/DatePicker/DateRangePicker.test.tsx

@@ -7,8 +7,8 @@ import { DateRangePickerEvent } from '../../testing/DatePickerEvent'
 import { formatter } from './DateRangePicker'
 import * as stories from './DateRangePicker.stories'
 import DateHelper, { TODAY } from '../Calendar/Date.helper'
-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 { DateRangePickerProps } from './DatePicker.types'
 import type { CalendarDate, CalendarMonthAlias } from '../Calendar'

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import Dialog from './Dialog'
 import useDialog from './useDialog'
 import type { DialogProps } from './Dialog'

package/src/components/Dialog/Dialog.test.tsx

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react'
 
 import Dialog from './Dialog'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 import type { DialogProps } from './Dialog'
 
 const setup = (props: DialogProps) => renderer(<Dialog {...props} />).render()

package/src/components/Dialog/Dialog.tsx

@@ -23,11 +23,11 @@ export interface DialogProps extends WithScaleProps {
 
 const Header = styled.h1`
   padding-bottom: ${token('space-s')};
-
-  color: ${token('dialog-header-color')};
-  font-weight: ${token('font-weight-bold')};
   font-size: ${token('font-size-2')};
+  font-weight: ${token('font-weight-bold')};
   line-height: ${token('font-height-2')};
+
+  color: ${token('dialog-header-color')};
   text-align: center;
 
   border-bottom: 1px solid ${token('dialog-header-border-color')};
@@ -35,10 +35,10 @@ const Header = styled.h1`
 const Body = styled.div`
   margin-top: ${token('space-l')};
   margin-bottom: ${token('space-l')};
-
-  color: ${token('dialog-body-font-color')};
   font-size: ${token('font-size-4')};
   line-height: ${token('font-height-3')};
+
+  color: ${token('dialog-body-font-color')};
   text-align: center;
 `
 

package/src/components/DragDropFile/DragDropFile.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import { ErrorMessage } from 'components/ErrorMessage'
 

package/src/components/DragDropFile/components/DropZone.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
-import generator from '../../../../tests/generator'
+import generator from '../../../tests/generator'
 import { renderWithDragDropFileProvider, DragDropFileEvent } from '../../../testing'
 
 import type { DropZoneProps } from '../types'

package/src/components/DragDropFile/styles.tsx

@@ -29,36 +29,31 @@ export const DragDropFileWrapper = styled(Stack)<{ withFileList: boolean }>`
 export const DropZoneWrapper = styled((props: StackProps) => <Stack as="label" {...props} />)<
   Pick<DropZoneProps, 'disabled' | 'error'>
 >`
-  ${transition({ property: 'border-color, box-shadow, opacity' })}
-
+  padding: ${getToken('space-l')} ${getToken('space-3xl')};
+  text-align: center;
   cursor: pointer;
-
   background-color: ${getToken('color-neutral-white')};
-  border-radius: ${getToken('border-radius-s')};
-  border: 2px dashed;
   border-color: ${conditional({
     'color-neutral-light': whenProps({ error: false }),
     'color-danger': whenProps({ disabled: false, error: true }),
   })};
-
-  padding: ${getToken('space-l')} ${getToken('space-3xl')};
-
-  text-align: center;
+  border-style: dashed;
+  border-width: 2px;
+  border-radius: ${getToken('border-radius-s')};
 
   ${hoverable`
     border-color: ${conditional({
       'color-accent': whenProps({ disabled: false, error: false }),
     })};
   `}
-
   ${focusable`
     border-color: ${conditional({
       'color-accent': whenProps({ disabled: false, error: false }),
     })};
     box-shadow: ${getToken('shadow-glow-primary')};
   `}
-
   ${disableable()}
+  ${transition({ property: 'border-color, box-shadow, opacity' })}
 `
 
 export const HiddenInput = styled.input`

package/src/components/Drawer/Drawer.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 { Drawer, useDrawer } from '.'
 import type { DrawerProps } from './Drawer'

package/src/components/Drawer/Drawer.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 Drawer from './Drawer'
 import type { DrawerProps } from './Drawer'

package/src/components/Drawer/Drawer.tsx

@@ -29,12 +29,12 @@ const StyledAside = styled.aside<Pick<DrawerProps, 'open'>>`
   width: 100%;
   height: 100%;
 
-  background: ${token('modal-overlay-background')};
-
   visibility: ${conditional({
     visible: whenProps({ open: true }),
     hidden: whenProps({ open: false }),
   })};
+
+  background: ${token('modal-overlay-background')};
 `
 
 const CloseButton = styled(DefaultCloseButton)`
@@ -81,15 +81,15 @@ const StyledHeader = styled.header`
   justify-content: center;
 
   padding: ${token('space-xl')};
+  font-size: ${token('font-size-2')};
+  font-weight: ${token('font-weight-bold')};
 
   color: ${token('color-neutral-darker')};
-  font-weight: ${token('font-weight-bold')};
-  font-size: ${token('font-size-2')};
   text-align: center;
 
   border-bottom-color: ${token('color-neutral-light')};
-  border-bottom-width: 1px;
   border-bottom-style: solid;
+  border-bottom-width: 1px;
 `
 
 const StyledBody = styled.div`
@@ -108,8 +108,8 @@ const StyledFooter = styled.footer`
   padding: ${token('space-xl')};
 
   border-top-color: ${token('color-neutral-light')};
-  border-top-width: 1px;
   border-top-style: solid;
+  border-top-width: 1px;
 `
 
 export interface DrawerHeaderProps {

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import { ACTIONS, PROFILE_ACTIONS, SUBSCRIPTION_ACTIONS } from './Dropdown.fixtures'
 import { Icon } from 'components/Icon'
@@ -28,9 +28,12 @@ export default {
   },
 } as Meta
 
-type DropdownStoryProps = DropdownProps & DropdownMenuProps & DropdownTriggerProps
+export type DropdownStoryProps = DropdownProps & {
+  align?: DropdownMenuProps['align']
+  outlined?: DropdownTriggerProps['outlined']
+}
 
-export const Playground: Story<DropdownStoryProps> = (args: DropdownStoryProps) => {
+export const Playground: Story<DropdownStoryProps> = (args) => {
   const [message, setMessage] = useState('')
 
   return (
@@ -58,13 +61,15 @@ export const Playground: Story<DropdownStoryProps> = (args: DropdownStoryProps)
   )
 }
 
+Playground.bind({})
+
 Playground.args = {
   disabled: false,
   align: 'start',
   outlined: true,
 }
 
-export const WithSections: Story<DropdownStoryProps> = (args: DropdownStoryProps) => {
+export const WithSections: Story<DropdownStoryProps> = (args) => {
   const [message, setMessage] = useState('')
 
   return (
@@ -111,7 +116,7 @@ WithSections.args = {
   outlined: true,
 }
 
-export const Extended: Story<DropdownStoryProps> = (args: DropdownStoryProps) => {
+export const Extended: Story<DropdownStoryProps> = (args) => {
   const [message, setMessage] = useState('')
 
   return (
@@ -185,7 +190,7 @@ function InputTrigger() {
   )
 }
 
-export const CustomTrigger: Story<DropdownStoryProps> = (args: DropdownStoryProps) => {
+export const CustomTrigger: Story<DropdownStoryProps> = (args) => {
   const [message, setMessage] = useState('')
 
   function renderMenu() {

package/src/components/Dropdown/Dropdown.test.tsx

@@ -3,20 +3,18 @@ import { composeStories } from '@storybook/testing-react'
 
 import { ACTIONS, PROFILE_ACTIONS, SUBSCRIPTION_ACTIONS } from './Dropdown.fixtures'
 import * as stories from './Dropdown.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen, user, waitFor } from '../../../tests/renderer'
-
-import type { DropdownProps } from './Dropdown.types'
+import generator from '../../tests/generator'
+import renderer, { screen, user, waitFor } from '../../tests/renderer'
 
 const { Playground, WithSections, Extended } = composeStories(stories)
 
 describe('Dropdown', () => {
   describe('Generic', () => {
-    const setup = (overrides: Partial<DropdownProps>) =>
+    const setup = (overrides?: stories.DropdownStoryProps) =>
       renderer(<Playground {...overrides} />).render()
 
     it('starts collapsed', () => {
-      setup({})
+      setup()
 
       screen.getByText('Actions')
 
@@ -26,7 +24,7 @@ describe('Dropdown', () => {
     })
 
     it('renders all options when expanded', () => {
-      setup({})
+      setup()
 
       user.click(screen.getByText('Actions'))
 
@@ -36,7 +34,7 @@ describe('Dropdown', () => {
     })
 
     it('performs option click and collapses', async () => {
-      setup({})
+      setup()
 
       user.click(screen.getByText('Actions'))
 
@@ -64,11 +62,11 @@ describe('Dropdown', () => {
   })
 
   describe('With Sections', () => {
-    const setup = (overrides: Partial<DropdownProps>) =>
+    const setup = (overrides?: stories.DropdownStoryProps) =>
       renderer(<WithSections {...overrides} />).render()
 
     it('starts collapsed', () => {
-      setup({})
+      setup()
 
       screen.getByText('Sections')
 
@@ -78,7 +76,7 @@ describe('Dropdown', () => {
     })
 
     it('renders all sections and their options when expanded', async () => {
-      setup({})
+      setup()
 
       user.click(screen.getByText('Sections'))
 
@@ -100,7 +98,7 @@ describe('Dropdown', () => {
     it('performs option click and collapses', async () => {
       const SECTION_ACTIONS = [...PROFILE_ACTIONS, ...SUBSCRIPTION_ACTIONS]
 
-      setup({})
+      setup()
 
       user.click(screen.getByText('Sections'))
 
@@ -120,11 +118,11 @@ describe('Dropdown', () => {
   })
 
   describe('With Header and Footer', () => {
-    const setup = (overrides: Partial<DropdownProps>) =>
+    const setup = (overrides?: stories.DropdownStoryProps) =>
       renderer(<Extended {...overrides} />).render()
 
     it('starts collapsed', () => {
-      setup({})
+      setup()
 
       screen.getByText('With Header & Footer')
 
@@ -134,7 +132,7 @@ describe('Dropdown', () => {
     })
 
     it('renders header, footer, and options when expanded', async () => {
-      setup({})
+      setup()
 
       user.click(screen.getByText('With Header & Footer'))
 
@@ -150,7 +148,7 @@ describe('Dropdown', () => {
     })
 
     it('performs option click and collapses', async () => {
-      setup({})
+      setup()
 
       user.click(screen.getByText('With Header & Footer'))
 

package/src/components/Dropdown/DropdownMenu.tsx

@@ -66,42 +66,32 @@ const Children = styled.span`
 `
 
 const DropdownItemWrapper = styled.button`
-  ${transition()}
-
   display: inline-flex;
-  justify-content: flex-start;
+  flex: 1 0;
   align-items: center;
-
-  ${font({
-    height: 'font-height-3',
-    weight: 'font-weight-medium',
-  })}
-  font-size: ${token('font-size-4')};
-
+  justify-content: flex-start;
   min-height: 36px;
-  flex: 1 0;
-
-  border: none;
-  border-radius: ${token('border-radius-s')};
-  background: ${token('color-neutral-white')};
-
-  color: ${token('color-neutral-darker')};
-
   padding: 0 ${token('space-s')};
-
   margin: 0 ${token('space-s')};
-
+  font-size: ${token('font-size-4')};
+  color: ${token('color-neutral-darker')};
   cursor: pointer;
+  background: ${token('color-neutral-white')};
+  border: none;
+  border-radius: ${token('border-radius-s')};
 
+  ${font({
+    height: 'font-height-3',
+    weight: 'font-weight-medium',
+  })}
   ${hoverable`
     background: ${token('color-neutral-lighter')};
   `}
-
   ${focusable`
     background: ${token('color-neutral-lighter')};
   `}
-
   ${disableable()}
+  ${transition()}
 
   ${Children} {
     flex: 1 0 auto;
@@ -124,17 +114,14 @@ const DropdownItemWrapper = styled.button`
 
 const DropdownSectionHeader = styled.strong`
   display: flex;
-  justify-content: flex-start;
   align-items: center;
-
+  justify-content: flex-start;
+  margin: 0 ${token('space-s')};
+  font-size: ${token('font-size-4')};
   ${font({
     height: 'font-height-3',
     weight: 'font-weight-bold',
   })}
-
-  font-size: ${token('font-size-4')};
-
-  margin: 0 ${token('space-s')};
 `
 
 const DropdownSectionWrapper = styled.div`

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -57,19 +57,15 @@ const TriggerButton = styled(
   SelectorButton as React.ForwardRefExoticComponent<TriggerButtonProps>
 ).attrs(triggerButtonAttrs)`
   flex: 1;
-
   justify-content: flex-start;
-
-  border: none;
-
+  font-weight: ${conditional({
+    'font-weight-regular': whenProps({ outlined: false }),
+  })};
   text-transform: ${conditional({
     capitalize: whenProps({ outlined: false, variant: 'tertiary' }),
     uppercase: whenProps({ outlined: true }),
   })};
-
-  font-weight: ${conditional({
-    'font-weight-regular': whenProps({ outlined: false }),
-  })};
+  border: none;
 
   ${hoverable`
       border-color: ${conditional({
@@ -117,17 +113,17 @@ const TriggerButton = styled(
           overflow: hidden;
 
           font-weight: ${token('font-weight-bold')};
+          pointer-events: none;
 
           visibility: hidden;
 
-          /* @REVIEW: since this is a span descendant of a button 
-          I'm using the direct value of children the solution inside Link 
+          /* @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;
@@ -139,33 +135,29 @@ const TriggerButton = styled(
 `
 
 const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
-  ${transition()}
-
-  ${font({
-    height: 'font-height-3',
-    weight: 'font-weight-medium',
-  })}
-
   display: flex;
-  justify-content: flex-start;
+  flex: 1;
   align-items: center;
+  justify-content: flex-start;
 
-  border-radius: ${token('button-border-radius')};
-  border-width: ${token('button-border-width')};
-  border-style: solid;
+  height: 36px;
+  font-size: ${token('font-size-4')};
+
+  color: ${token('color-neutral-darker')};
   border-color: ${conditional({
     'button-secondary-border-color': whenProps({ scheme: 'light', $outlined: true }),
     'button-secondary-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
     'color-transparent': whenProps({ $outlined: false }),
   })};
+  border-style: solid;
+  border-width: ${token('button-border-width')};
+  border-radius: ${token('button-border-radius')};
 
-  font-size: ${token('font-size-4')};
-
-  color: ${token('color-neutral-darker')};
-
-  height: 36px;
-  flex: 1;
-
+  ${transition()}
+  ${font({
+    height: 'font-height-3',
+    weight: 'font-weight-medium',
+  })}
   ${hoverable`
     border-color: ${conditional({
       'button-secondary-border-color--hover': whenProps({ scheme: 'light', $outlined: true }),
@@ -213,13 +205,11 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
 `
 
 const TriggerHandle = styled(BaseButton)`
-  ${focusable()}
-
+  height: calc(100% - 2px);
   background: ${token('color-transparent')};
-  border-radius: 0 ${token('border-radius-s')} ${token('border-radius-s')} 0;
   border: none;
-
-  height: calc(100% - 2px);
+  border-radius: 0 ${token('border-radius-s')} ${token('border-radius-s')} 0;
+  ${focusable()}
 `
 
 const RotatableIcon = styled(DefaultIcon)<{ $rotate: boolean }>`

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import { Icon } from 'components/Icon'
 import { Stack } from 'components/Layout'

package/src/components/EmptyState/EmptyState.test.tsx

@@ -4,7 +4,7 @@ import { composeStories } from '@storybook/testing-react'
 import userEvent from '@testing-library/user-event'
 
 import * as stories from './EmptyState.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { EmptyStateProps } from './EmptyState.types'
 import {