@loadsmart/loadsmart-ui 5.9.0 → 5.10.1

package/src/components/Button/Button.tsx

@@ -14,17 +14,23 @@ import rem from 'utils/toolset/rem'
 import transition from 'styles/transition'
 import typography from 'styles/typography'
 
+import { LoadingDots } from 'components/Loaders'
+
 import type { ButtonHTMLAttributes, ForwardedRef, ReactNode } from 'react'
 import type { IconProps } from 'components/Icon'
 import type ColorScheme from 'utils/types/ColorScheme'
+import type { LoadingDotsProps } from 'components/Loaders'
+
+export type ButtonVariants = 'primary' | 'secondary' | 'warning' | 'icon' | 'tertiary'
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string
   leading?: ReactNode
   scheme?: ColorScheme
   trailing?: ReactNode
-  variant?: 'primary' | 'secondary' | 'warning' | 'icon' | 'tertiary'
+  variant?: ButtonVariants
   scale?: 'small' | 'default' | 'large'
+  loading?: boolean
 }
 
 const StyledSpan = styled.span`
@@ -44,33 +50,24 @@ const Trailing = styled(StyledSpan)`
   /* placeholder */
 `
 
-export const Children = styled.span`
-  ${({ children }: ButtonProps) =>
+export const Children = styled.span<ButtonProps>`
+  ${({ children }) =>
     typeof children === 'string'
-      ? `
-    ${ellipsizable()}
-  `
+      ? ellipsizable()
       : `
-      display: inline-flex;
-      flex-flow: row nowrap;
-      align-items: center;
-      justify-content: center;
-  `}
+          display: inline-flex;
+          flex-flow: row nowrap;
+          align-items: center;
+          justify-content: center;
+        `}
 
   padding: ${rem('6px')} 0;
 `
 
-const BaseStyledButton = styled.button<{ $scale: ButtonProps['scale'] }>`
-  ${transition()}
-
-  ${typography(
-    conditional({
-      'button-md': whenProps({ $scale: 'default' }),
-      'button-sm': whenProps({ $scale: 'small' }),
-      'button-lg': whenProps({ $scale: 'large' }),
-    })
-  )}
-
+const BaseStyledButton = styled.button<{
+  $scale: ButtonProps['scale']
+  $loading?: ButtonProps['loading']
+}>`
   box-sizing: border-box;
 
   display: inline-flex;
@@ -78,16 +75,6 @@ const BaseStyledButton = styled.button<{ $scale: ButtonProps['scale'] }>`
   align-items: center;
   justify-content: center;
 
-  text-transform: uppercase;
-  text-align: center;
-
-  cursor: pointer;
-
-  border-radius: ${token('border-radius-s')};
-  border-width: ${token('border-width-thin')};
-  border-style: solid;
-  border-color: ${token('color-neutral-darker')};
-
   height: ${conditional({
     'button-height': whenProps({ $scale: 'default' }),
     'button-small-height': whenProps({ $scale: 'small' }),
@@ -95,8 +82,27 @@ const BaseStyledButton = styled.button<{ $scale: ButtonProps['scale'] }>`
   })};
 
   padding: 0 8px;
+  text-align: center;
+  text-transform: uppercase;
+
+  cursor: pointer;
+
+  border-color: ${token('color-neutral-darker')};
+  border-style: solid;
+  border-width: ${token('border-width-thin')};
+  border-radius: ${token('border-radius-s')};
 
   ${disableable()}
+  ${transition()}
+  ${typography(
+    conditional({
+      'button-md': whenProps({ $scale: 'default' }),
+      'button-sm': whenProps({ $scale: 'small' }),
+      'button-lg': whenProps({ $scale: 'large' }),
+    })
+  )}
+
+  ${({ $loading }) => $loading && 'pointer-events: none;'}
 
   ${Leading} {
     margin: 0 ${token('space-xs')} 0 0;
@@ -359,15 +365,86 @@ const StyledSelector = styled(StyledButton)`
   }
 `
 
-export const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { scale = 'default', children, leading, trailing, ...others }: ButtonProps,
+const TextHidden = styled.span`
+  transform: scale(0);
+`
+
+/**
+ * Accessible attributes in `LoadingDots` aren't necessary
+ * because the `Button` will keep its content, but invisible
+ */
+const StyledLoadingDots = styled(LoadingDots).attrs({
+  'aria-label': undefined,
+  role: 'presentation',
+})`
+  position: absolute;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+`
+
+const ButtonLoadingDots = ({
+  buttonVariant = 'secondary',
+  ...remainingProps
+}: Omit<LoadingDotsProps, 'variant'> & { buttonVariant?: ButtonVariants }) => {
+  const buttonLightVariants = new Set(['secondary', 'warning', 'icon', 'tertiary'])
+  /**
+   * Change LoadingDots variant between `light` and `dark` to have contrast with Button's variant
+   */
+  const loadingDotsVariant: 'dark' | 'light' = buttonLightVariants.has(buttonVariant)
+    ? 'dark'
+    : 'light'
+
+  return <StyledLoadingDots {...remainingProps} variant={loadingDotsVariant} />
+}
+
+function ButtonChildrenWrapper({
+  loading,
+  children,
+  variant,
+}: Pick<ButtonProps, 'loading' | 'children' | 'variant'>) {
+  if (loading) {
+    return (
+      <>
+        <ButtonLoadingDots buttonVariant={variant} />
+        <TextHidden>{children}</TextHidden>
+      </>
+    )
+  }
+
+  return <>{children}</>
+}
+
+export const BaseButton = forwardRef<HTMLButtonElement, ButtonProps>(function BaseButton(
+  {
+    scale = 'default',
+    children,
+    leading,
+    trailing,
+    loading,
+    disabled,
+    variant,
+    ...others
+  }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
 ) {
   return (
-    <BaseStyledButton ref={ref} {...others} $scale={scale}>
-      {leading && <Leading aria-hidden="true">{leading}</Leading>}
-      <Children>{children}</Children>
-      {trailing && <Trailing aria-hidden="true">{trailing}</Trailing>}
+    <BaseStyledButton
+      ref={ref}
+      {...others}
+      aria-disabled={loading ? 'true' : undefined}
+      disabled={disabled}
+      $scale={scale}
+      $loading={loading}
+    >
+      <ButtonChildrenWrapper loading={loading} variant={variant}>
+        {leading && <Leading aria-hidden="true">{leading}</Leading>}
+        <Children loading={loading}>{children}</Children>
+        {trailing && <Trailing aria-hidden="true">{trailing}</Trailing>}
+      </ButtonChildrenWrapper>
     </BaseStyledButton>
   )
 })
@@ -381,6 +458,8 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
     children,
     leading,
     trailing,
+    disabled,
+    loading,
     ...others
   }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
@@ -390,13 +469,18 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
       ref={ref}
       {...others}
       type={type}
+      aria-disabled={loading ? 'true' : undefined}
+      disabled={disabled}
       $scheme={scheme}
       $scale={scale}
       $variant={variant}
+      $loading={loading}
     >
-      {leading && <Leading>{leading}</Leading>}
-      <Children>{children}</Children>
-      {trailing && <Trailing>{trailing}</Trailing>}
+      <ButtonChildrenWrapper loading={loading} variant={variant}>
+        {leading && <Leading>{leading}</Leading>}
+        <Children>{children}</Children>
+        {trailing && <Trailing>{trailing}</Trailing>}
+      </ButtonChildrenWrapper>
     </StyledButton>
   )
 })
@@ -405,7 +489,7 @@ export function Caret(props: Omit<IconProps, 'name'>): JSX.Element {
   return <Icon size={20} {...props} name="caret-down" />
 }
 
-export const SelectorButton = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
+export const SelectorButton = forwardRef<HTMLButtonElement, ButtonProps>(function SelectorButton(
   {
     scheme = 'light',
     scale = 'default',
@@ -413,6 +497,8 @@ export const SelectorButton = forwardRef<HTMLButtonElement, ButtonProps>(functio
     variant = 'secondary',
     children,
     trailing,
+    disabled,
+    loading,
     ...others
   }: ButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
@@ -424,18 +510,25 @@ export const SelectorButton = forwardRef<HTMLButtonElement, ButtonProps>(functio
       ref={ref}
       {...others}
       type={type}
+      aria-disabled={loading ? 'true' : undefined}
+      disabled={disabled}
+      $loading={loading}
       $scheme={scheme}
       $scale={scale}
       $variant={variant}
     >
-      <Children>{children}</Children>
-      {trailing && <Trailing>{trailing}</Trailing>}
+      <ButtonChildrenWrapper loading={loading} variant={variant}>
+        <Children>{children}</Children>
+        {trailing && <Trailing>{trailing}</Trailing>}
+      </ButtonChildrenWrapper>
     </StyledSelector>
   )
 })
 
-export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  { scheme = 'light', scale = 'default', type = 'button', children, ...others }: ButtonProps,
+export type IconButtonProps = Omit<ButtonProps, 'leading' | 'trailing' | 'variant' | 'loading'>
+
+export const IconButton = forwardRef<HTMLButtonElement, ButtonProps>(function IconButton(
+  { scheme = 'light', scale = 'default', type = 'button', children, ...others }: IconButtonProps,
   ref: ForwardedRef<HTMLButtonElement>
 ) {
   others = omit<ButtonProps>(others, ['leading', 'trailing', 'variant'])

package/src/components/Calendar/Calendar.tsx

@@ -23,23 +23,19 @@ const Container = styled(Stack)`
 `
 
 const BorderlessButton = styled(BaseButton)`
-  ${typography('body-bold')}
-  border-color: transparent;
-  background-color: transparent;
-
   color: ${token('color-neutral')};
-
-  inline-size: 40px;
-
   visibility: ${conditional({
     visible: whenProps({ 'aria-hidden': false }),
     hidden: whenProps({ 'aria-hidden': true }),
   })};
+  background-color: transparent;
+  border-color: transparent;
+  inline-size: 40px;
 
+  ${typography('body-bold')}
   ${hoverable`
     color: ${token('color-neutral-dark')};
   `}
-
   ${focusable`
     box-shadow: ${token('button-primary-outline')};
   `}

package/src/components/Calendar/PickerModeToggle.tsx

@@ -12,7 +12,10 @@ import typography from 'styles/typography'
 import type { ButtonProps } from 'components/Button'
 
 const Button = styled(BaseButton)`
+  color: ${token('color-neutral-dark')};
   user-select: none;
+  background-color: transparent;
+  border-color: transparent;
 
   ${typography(
     conditional({
@@ -20,15 +23,9 @@ const Button = styled(BaseButton)`
       body: whenProps({ 'aria-expanded': false }),
     })
   )};
-  border-color: transparent;
-  background-color: transparent;
-
-  color: ${token('color-neutral-dark')};
-
   ${focusable`
     box-shadow: ${token('button-primary-outline')};
   `}
-
   ${disableable`
     pointer-events: none;
     opacity: 1;

package/src/components/Calendar/Pickers/DayPicker.tsx

@@ -53,9 +53,9 @@ const Text = styled(DefaultText)`
 
 const Grid = styled.div`
   display: grid;
-  grid-gap: ${token('space-2xs')};
   grid-template-rows: 1.25rem repeat(auto-fill, 2.5rem);
   grid-template-columns: repeat(7, 2.5rem);
+  grid-gap: ${token('space-2xs')};
 `
 
 /**

package/src/components/Calendar/Pickers/MonthPicker.tsx

@@ -10,9 +10,9 @@ import type { CalendarMonth, CalendarMonthAlias } from '../Month.helper'
 
 const Container = styled.div`
   display: grid;
+  grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 3.75rem;
   grid-gap: ${token('space-2xs')};
-  grid-template-columns: repeat(3, 1fr);
 `
 
 function getStatus(calendar: useCalendarReturn, month: CalendarMonth) {

package/src/components/Calendar/Pickers/PickerButton.tsx

@@ -19,20 +19,8 @@ const PickerButton = styled(BaseButton)<{
     | 'selection'
     | 'next-month-day'
 }>`
-  ${typography(
-    conditional({
-      body: whenProps({ $status: ['default', 'faded'] }),
-      'body-bold': whenProps({
-        $status: ['current-day', 'selection-start', 'selection', 'selection-end'],
-      }),
-    })
-  )}
-
-  user-select: none;
-
   height: 100%;
-
-  border-radius: 0;
+  padding: ${token('space-xs')} ${token('space-s')};
 
   color: ${conditional({
     'color-neutral-lighter': whenProps({
@@ -42,30 +30,45 @@ const PickerButton = styled(BaseButton)<{
     'color-neutral-dark': whenProps({ $status: 'next-month-day' }),
     'color-accent': whenProps({ $status: 'current-day' }),
   })};
-
+  visibility: ${conditional({
+    visible: whenProps({ 'aria-hidden': false }),
+    hidden: whenProps({ 'aria-hidden': true }),
+  })};
+  user-select: none;
   background: ${conditional({
     'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
     'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
     'color-neutral': whenProps({ $status: 'selection' }),
     'color-neutral-lightest': whenProps({ $status: 'current-day' }),
   })};
-
   border-color: ${conditional({
     'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
     'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
     'color-neutral': whenProps({ $status: 'selection' }),
     'color-neutral-light': whenProps({ $status: 'current-day' }),
   })};
+  border-radius: 0;
 
   ${conditional({
     'opacity: 0.4;': whenProps({ $status: 'faded' }),
     'opacity: 1;': whenProps({ $status: (status) => status !== 'faded' }),
   })}
-
-  padding: ${token('space-xs')} ${token('space-s')};
-
+  ${typography(
+    conditional({
+      body: whenProps({ $status: ['default', 'faded'] }),
+      'body-bold': whenProps({
+        $status: ['current-day', 'selection-start', 'selection', 'selection-end'],
+      }),
+    })
+  )}
   ${hoverable`
-    border-color: ${token('color-neutral')};
+    font-weight: ${token('font-weight-bold')};
+    color: ${conditional({
+      'color-neutral-dark': whenProps({ $status: ['default', 'faded'] }),
+      'color-neutral-lightest': whenProps({
+        $status: ['selection-start', 'selection', 'selection-end'],
+      }),
+    })};
     background-color: ${conditional({
       'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
       'color-neutral-dark': whenProps({
@@ -73,14 +76,7 @@ const PickerButton = styled(BaseButton)<{
       }),
       'color-neutral-lightest': whenProps({ $status: 'current-day' }),
     })};
-    color: ${conditional({
-      'color-neutral-dark': whenProps({ $status: ['default', 'faded'] }),
-      'color-neutral-lightest': whenProps({
-        $status: ['selection-start', 'selection', 'selection-end'],
-      }),
-    })};
-
-    font-weight: ${token('font-weight-bold')};
+    border-color: ${token('color-neutral')};
   `}
 
   ${focusable`
@@ -89,31 +85,25 @@ const PickerButton = styled(BaseButton)<{
   `}
 
   ${activatable`
-    border-color: ${token('color-neutral')};
-    background-color: ${conditional({
-      'color-transparent': whenProps({ 'aria-checked': false }),
-      'color-neutral': whenProps({ 'aria-checked': true }),
-    })};
     color: ${conditional({
       'color-neutral': whenProps({ 'aria-checked': false }),
       'color-neutral-white': whenProps({ 'aria-checked': true }),
     })};
+    background-color: ${conditional({
+      'color-transparent': whenProps({ 'aria-checked': false }),
+      'color-neutral': whenProps({ 'aria-checked': true }),
+    })};
+    border-color: ${token('color-neutral')};
   `}
 
   ${disableable`
+    color: ${token('color-neutral-darker')};
     background-color: ${token('color-transparent')};
     border-color: ${conditional({
       'color-neutral-darkest': whenProps({ 'aria-checked': true }),
       'color-transparent': whenProps({ 'aria-checked': false }),
     })};
-
-    color: ${token('color-neutral-darker')};
   `}
-
-  visibility: ${conditional({
-    visible: whenProps({ 'aria-hidden': false }),
-    hidden: whenProps({ 'aria-hidden': true }),
-  })};
 `
 
 export default styled(PickerButton)({})

package/src/components/Calendar/Pickers/YearPicker.tsx

@@ -9,9 +9,9 @@ import type { useCalendarReturn, CalendarPickerProps } from '../Calendar.types'
 
 const Container = styled.div`
   display: grid;
+  grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 2.875rem;
   grid-gap: ${token('space-2xs')};
-  grid-template-columns: repeat(4, 1fr);
 `
 
 const PickerButton = styled(DefaultPickerButton)`

package/src/components/Card/Card.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 Card from './Card'
 import generator from '../../../tests/generator'

package/src/components/Card/Card.tsx

@@ -15,10 +15,10 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
 
 const CardSubtitle = styled.div`
   padding: 0 ${token('card-padding-x')} ${token('card-padding-y')};
+  font-size: ${token('card-subtitle-font-size')};
+  font-weight: ${token('card-subtitle-font-weight')};
 
   color: ${token('card-color')};
-  font-weight: ${token('card-subtitle-font-weight')};
-  font-size: ${token('card-subtitle-font-size')};
 `
 
 const CardSeparator = styled.hr`
@@ -35,12 +35,13 @@ const CardBody = styled.div`
 `
 
 const Wrapper = styled.div`
-  ${font({})}
-
   display: flex;
   flex-direction: row;
-
   color: ${token('card-color')};
+  background: ${token('card-background')};
+  border: 1px solid ${token('card-border-color')};
+  border-radius: ${token('card-border-radius')};
+  ${font({})}
 
   ${CardTitleWrapper} + ${CardSubtitle} {
     margin-top: ${token('space-xs')};
@@ -49,10 +50,6 @@ const Wrapper = styled.div`
   ${CardTitleWrapper} + ${CardSeparator} {
     margin-top: ${token('card-padding-y')};
   }
-
-  border: 1px solid ${token('card-border-color')};
-  border-radius: ${token('card-border-radius')};
-  background: ${token('card-background')};
 `
 
 const Container = styled.div<{ flagged: boolean }>`

package/src/components/Card/CardTitle.tsx

@@ -23,11 +23,11 @@ const Leading = styled(StyledSpan)`
 const Wrapper = styled.div`
 
   padding: ${token('card-padding-y')} ${token('card-padding-x')} 0;
-
-  color: ${token('card-color')};
-  font-weight: ${token('card-title-font-weight')};
   font-size: ${token('card-title-font-size')};
+  font-weight: ${token('card-title-font-weight')};
   line-height: ${token('card-title-font-height')};
+
+  color: ${token('card-color')};
 `
 
 function CardTitle({ children, leading, ...others }: CardTitleProps): JSX.Element {

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Checkbox, { CheckboxProps } from './Checkbox'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import Status from 'utils/types/Status'
 

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/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'