@loadsmart/loadsmart-ui 5.9.0 → 5.10.1

package/src/components/TextField/TextField.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 
 import { getToken as token } from 'theming'
 import { useFocusWithin } from 'hooks/useFocusWithin'
-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'
@@ -34,12 +34,12 @@ const InputWrapper = styled.div<WithAdditionalProps>`
   display: inline-flex;
   flex-flow: row nowrap;
 
+  min-width: 0;
   height: ${conditional({
     'text-field-height': whenProps({ scale: 'default' }),
     'text-field-small-height': whenProps({ scale: 'small' }),
     'text-field-large-height': whenProps({ scale: 'large' }),
   })};
-  min-width: 0;
 
   ${font({
     height: 'text-field-font-height',
@@ -51,10 +51,10 @@ const InputWrapper = styled.div<WithAdditionalProps>`
     'text-field-large-font-size': whenProps({ scale: 'large' }),
   })};
 
-  border-radius: ${token('text-field-border-radius')};
-  border-width: 1px;
-  border-style: solid;
-
+  color: ${conditional({
+    'text-field-color': whenProps({ scheme: 'light' }),
+    'text-field-dark-color': whenProps({ scheme: 'dark' }),
+  })};
   background: ${conditional({
     'text-field-background': whenProps({ scheme: 'light' }),
     'text-field-dark-background': whenProps({ scheme: 'dark' }),
@@ -66,11 +66,9 @@ const InputWrapper = styled.div<WithAdditionalProps>`
     'text-field-danger-border-color': whenProps({ status: Status.Danger }),
     'text-field-success-border-color': whenProps({ status: Status.Success }),
   })};
-
-  color: ${conditional({
-    'text-field-color': whenProps({ scheme: 'light' }),
-    'text-field-dark-color': whenProps({ scheme: 'dark' }),
-  })};
+  border-style: solid;
+  border-width: 1px;
+  border-radius: ${token('text-field-border-radius')};
 
   ${hoverable`
     background: ${conditional({
@@ -138,14 +136,8 @@ export const Trailing = styled(StyledSpan)<WithAdditionalProps>`
 `
 
 const StyledInput = styled.input<WithAdditionalProps>`
-  ${transition()}
-
-  ${font({
-    height: 'text-field-font-height',
-  })}
-
-  background: transparent;
-
+  flex: 1;
+  min-width: 0;
   padding: ${conditional({
       'text-field-padding-y': whenProps({ scale: 'default' }),
       'text-field-small-padding-y': whenProps({ scale: 'small' }),
@@ -159,12 +151,13 @@ const StyledInput = styled.input<WithAdditionalProps>`
       'text-field-small-padding-x': whenProps({ scale: 'small' }),
     })};
 
+  background: transparent;
   border: none;
 
-  flex: 1;
-
-  min-width: 0;
-
+  ${transition()}
+  ${font({
+    height: 'text-field-font-height',
+  })}
   ${focusable()}
   ${disableable()}
 

package/src/components/Textarea/Textarea.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState, ChangeEvent } from 'react'
 import Textarea, { TextareaProps } from './Textarea'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import { Icon } from 'components/Icon'
 import Status from 'utils/types/Status'

package/src/components/Textarea/Textarea.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 
 import { getToken as token } from 'theming'
 import { useFocusWithin } from 'hooks/useFocusWithin'
-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'
@@ -48,9 +48,10 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     'textarea-large-font-size': whenProps({ scale: 'large' }),
   })};
 
-  border-radius: ${token('textarea-border-radius')};
-  border-width: 1px;
-  border-style: solid;
+  color: ${conditional({
+    'textarea-color': whenProps({ scheme: 'light' }),
+    'textarea-dark-color': whenProps({ scheme: 'dark' }),
+  })};
 
   background: ${conditional({
     'textarea-background': whenProps({ scheme: 'light' }),
@@ -63,11 +64,9 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     'textarea-danger-border-color': whenProps({ status: Status.Danger }),
     'textarea-success-border-color': whenProps({ status: Status.Success }),
   })};
-
-  color: ${conditional({
-    'textarea-color': whenProps({ scheme: 'light' }),
-    'textarea-dark-color': whenProps({ scheme: 'dark' }),
-  })};
+  border-style: solid;
+  border-width: 1px;
+  border-radius: ${token('textarea-border-radius')};
 
   ${hoverable`
     background: ${conditional({
@@ -120,36 +119,30 @@ const StyledSpan = styled.span<WithAdditionalProps>`
 const Leading = styled(StyledSpan)<WithAdditionalProps>`
   align-items: flex-start;
 
+  padding: ${token('space-s')} 0;
+
   margin: 0 0 0
     ${conditional({
       'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
       'text-field-small-padding-x': whenProps({ scale: 'small' }),
     })};
-
-  padding: ${token('space-s')} 0;
 `
 
 const Trailing = styled(StyledSpan)<WithAdditionalProps>`
   align-items: flex-start;
 
+  padding: ${token('space-s')} 0;
+
   margin: 0
     ${conditional({
       'text-field-padding-x': whenProps({ scale: ['default', 'large'] }),
       'text-field-small-padding-x': whenProps({ scale: 'small' }),
     })}
     0 0;
-
-  padding: ${token('space-s')} 0;
 `
 
 const StyledTextarea = styled.textarea<WithAdditionalProps>`
-  ${transition()}
-
-  ${font({
-    height: 'textarea-font-height',
-  })}
-
-  background: transparent;
+  flex: 1 0 auto;
 
   padding: ${conditional({
       'textarea-padding-y': whenProps({ scale: 'default' }),
@@ -157,17 +150,19 @@ const StyledTextarea = styled.textarea<WithAdditionalProps>`
       'textarea-large-padding-y': whenProps({ scale: 'large' }),
     })}
     0;
-
   margin: 0
     ${conditional({
       'textarea-padding-x': whenProps({ scale: ['default', 'large'] }),
       'textarea-small-padding-x': whenProps({ scale: 'small' }),
     })};
 
+  background: transparent;
   border: none;
 
-  flex: 1 0 auto;
-
+  ${transition()}
+  ${font({
+    height: 'textarea-font-height',
+  })}
   ${focusable()}
   ${disableable()}
 `

package/src/components/Toast/Toast.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Toast, { ToastProps } from './Toast'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import Status from 'utils/types/Status'
 
 export default {

package/src/components/Toast/Toast.tsx

@@ -18,12 +18,12 @@ const Container = styled.div<ContainerProps>`
   max-width: 100%;
   padding: ${token('toast-padding-y')} ${token('toast-padding-x')};
   overflow: hidden;
-
-  color: ${token('toast-font-color')};
-  font-weight: ${token('toast-font-weight')};
   font-size: ${token('toast-font-size')};
+  font-weight: ${token('toast-font-weight')};
   line-height: ${token('toast-font-height')};
 
+  color: ${token('toast-font-color')};
+
   background: ${conditional({
     'toast-neutral-background': whenProps({ status: Status.Neutral }),
     'toast-success-background': whenProps({ status: Status.Success }),

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