@loadsmart/loadsmart-ui 5.10.0 → 5.10.1

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