@loadsmart/loadsmart-ui 5.10.0 → 5.10.1

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'

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

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/ErrorMessage/ErrorMessage.stories.tsx

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

package/src/components/HighlightMatch/HighlightMatch.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 HighlightMatch, { HighlightMatchProps } from './HighlightMatch'
 

package/src/components/HighlightMatch/HighlightMatch.test.tsx

@@ -3,7 +3,7 @@ import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './HighlightMatch.stories'
 import renderer, { screen } from '../../../tests/renderer'
-import { HighlightMatchProps } from './HighlightMatch'
+import type { HighlightMatchProps } from './HighlightMatch'
 
 const { Playground } = composeStories(stories)
 

package/src/components/HighlightMatch/HighlightMatch.tsx

@@ -15,9 +15,9 @@ const HighlightMatchWrapper = styled.span`
   white-space: pre;
 
   mark {
+    font-weight: ${token('font-weight-bold')};
 
     color: inherit;
-    font-weight: ${token('font-weight-bold')};
 
     background-color: ${token('color-transparent')};
   }

package/src/components/IconFactory/IconFactory.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 {
   Title,
   Subtitle,

package/src/components/Label/Label.stories.tsx

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

package/src/components/Label/Label.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { LabelHTMLAttributes } from 'react'
+import type { LabelHTMLAttributes } from 'react'
 import styled from 'styled-components'
 import clsx from 'clsx'
 import { isNil } from '@loadsmart/utils-object'
 
-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 ellipsizable from 'styles/ellipsizable'
@@ -56,9 +56,9 @@ const StyledChildren = styled.span<WithAdditionalProps>`
 
 const StyledRequired = styled.sup`
   top: 0;
+  font-size: ${token('label-font-size')};
 
   color: ${token('label-required-color')};
-  font-size: ${token('label-font-size')};
 `
 
 const StyledTooltipAnchor = styled.span<WithAdditionalProps>`
@@ -68,13 +68,13 @@ const StyledTooltipAnchor = styled.span<WithAdditionalProps>`
   width: 16px;
   height: 16px;
   margin: 0 0 0 ${token('label-tooltip-margin-left')};
+  font-size: ${token('label-tooltip-font-size')};
+  font-weight: ${token('label-tooltip-font-weight')};
 
   color: ${conditional({
     'label-tooltip-font-color': whenProps({ scheme: 'light' }),
     'label-tooltip-dark-font-color': whenProps({ scheme: 'dark' }),
   })};
-  font-weight: ${token('label-tooltip-font-weight')};
-  font-size: ${token('label-tooltip-font-size')};
 
   background: ${conditional({
     'label-tooltip-background-color': whenProps({ scheme: 'light' }),

package/src/components/Layout/Box.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 
 import { getToken as token } from 'theming'
 import conditional, { whenProps } from 'tools/conditional'
-import { Spacing } from './Layout.types'
+import type { Spacing } from './Layout.types'
 import { getSpace } from './Layout.utils'
 
 import type { HTMLAttributes } from 'react'

package/src/components/Layout/Grid.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import prop from 'tools/prop'
 
 import { getSpace } from 'components/Layout/Layout.utils'
-import { Spacing } from './Layout.types'
+import type { Spacing } from './Layout.types'
 
 import type { HTMLAttributes } from 'react'
 

package/src/components/Layout/Layout.stories.tsx

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

package/src/components/Layout/Sidebar.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import conditional, { whenProps } from 'tools/conditional'
 import prop from 'tools/prop'
 
-import { Spacing } from './Layout.types'
+import type { Spacing } from './Layout.types'
 import { getSpace } from './Layout.utils'
 
 import type { HTMLAttributes } from 'react'

package/src/components/Layout/Switcher.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import prop from 'tools/prop'
 
-import { Spacing } from './Layout.types'
+import type { Spacing } from './Layout.types'
 import { getSpace } from './Layout.utils'
 
 import type { HTMLAttributes } from 'react'

package/src/components/Link/Link.stories.tsx

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

package/src/components/Link/Link.tsx

@@ -17,31 +17,27 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
 const StyledBaseAnchor = styled.a`
-  ${font({
-    height: 'link-font-height',
-    weight: 'link-font-weight',
-  })}
-  ${transition()}
-
-  ${ellipsizable()}
-
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  text-align: center;
+  min-height: 24px;
   font-size: ${token('link-font-size')};
   color: ${token('color-neutral-darker')};
+  text-align: center;
   text-decoration: none;
 
-  min-height: 24px;
-
+  ${font({
+    height: 'link-font-height',
+    weight: 'link-font-weight',
+  })}
+  ${ellipsizable()}
+  ${transition()}
   ${hoverable`
     text-decoration: underline;
     font-weight: ${token('link-font-weight--hover')};
   `}
-
   ${disableable``}
 
   ${({ children }) =>
@@ -53,13 +49,13 @@ const StyledBaseAnchor = styled.a`
         overflow: hidden;
 
         font-weight: ${token('link-font-weight--hover')};
+        pointer-events: none;
 
         visibility: hidden;
 
         content: attr(data-text);
         content: attr(data-text) / '';
         user-select: none;
-        pointer-events: none;
 
         @media speech {
           display: none;

package/src/components/Link/useSafeLink.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes } from 'react'
+import type { AnchorHTMLAttributes } from 'react'
 import { isBlank } from '@loadsmart/utils-string'
 
 const INSECURE_HREF = /^javascript:/i

package/src/components/Loaders/LoadingBar.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 { Text } from 'components/Text'
 
 import { LoadingBarProps } from './LoadingBar'