@loadsmart/loadsmart-ui 5.10.0 → 5.10.1

package/src/components/Switch/Switch.tsx

@@ -24,19 +24,8 @@ export interface SwitchProps extends InputHTMLAttributes<HTMLInputElement>, With
 }
 
 const SwitchWrapper = styled.label<WithAdditionalProps>`
-  ${transition()}
-
-  ${font({})};
-
-  user-select: none;
-
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-
   position: relative;
-
   display: inline-flex;
-
   width: ${conditional({
     'switch-width': whenProps({ scale: 'default' }),
     'switch-large-width': whenProps({ scale: 'large' }),
@@ -45,28 +34,28 @@ const SwitchWrapper = styled.label<WithAdditionalProps>`
     'switch-height': whenProps({ scale: 'default' }),
     'switch-large-height': whenProps({ scale: 'large' }),
   })};
-
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
   background-color: ${conditional({
     'switch-inactive-background-color': whenProps({ active: false }),
     'switch-active-background-color': whenProps({ active: true }),
   })};
-
   border-radius: ${conditional({
     'switch-border-radius': whenProps({ scale: 'default' }),
     'switch-large-border-radius': whenProps({ scale: 'large' }),
   })};
-
+  ${transition()}
+  ${font({})};
   ${hoverable`
     background: ${conditional({
       'switch-inactive-background-color--hover': whenProps({ active: false }),
       'switch-active-background-color--hover': whenProps({ active: true }),
     })};
   `}
-
   ${focusable`
     box-shadow: ${token('switch-outline')}
   `}
-
   ${disableable``}
 `
 
@@ -102,6 +91,7 @@ const Slider = styled.span<WithAdditionalProps>`
       'switch-slider-large-size': whenProps({ scale: 'large' }),
     })};
 
+    content: '';
     background-color: ${token('switch-slider-background-color')};
     border-radius: ${token('switch-slider-border-radius')};
 
@@ -109,8 +99,6 @@ const Slider = styled.span<WithAdditionalProps>`
       timingFunction: 'ease-out',
       duration: '150ms',
     })}
-
-    content: '';
   }
 `
 

package/src/components/Table/Table.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import Table, { useSelection } from './Table'
 import type { TableColumns, TableProps } from './Table.types'

package/src/components/Table/Table.tsx

@@ -152,10 +152,10 @@ const StyledTable = styled.table<{ scale?: string }>`
 
   white-space: nowrap;
 
-  background-color: ${token('color-neutral-white')};
-
   border-collapse: collapse;
 
+  background-color: ${token('color-neutral-white')};
+
   ${StyledTableBody} ${StyledTableRow},
   ${StyledTableBody} ${StyledExpandableTableRow} {
     height: ${conditional({

package/src/components/Table/Table.types.ts

@@ -1,6 +1,11 @@
-import { Selectable } from 'hooks/useSelectable'
-import type { ComponentType, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
-import React from 'react'
+import type { Selectable } from 'hooks/useSelectable'
+import type {
+  ComponentType,
+  HTMLAttributes,
+  PropsWithChildren,
+  ReactNode,
+  ReactElement,
+} from 'react'
 import type { DropdownMenuItemProps, DropdownMenuProps } from 'components/Dropdown'
 import type { DropdownTriggerButtonProps } from 'components/Dropdown/DropdownTrigger'
 
@@ -26,7 +31,7 @@ export interface TableSelectionProps extends HTMLAttributes<HTMLDivElement> {
 export interface SelectionCellProps<T extends Selectable = TableSelectableRow>
   extends HTMLAttributes<HTMLTableCellElement> {
   value?: T
-  children?: (props: { selected: boolean; toggle: () => void }) => React.ReactElement
+  children?: (props: { selected: boolean; toggle: () => void }) => ReactElement
 }
 
 export interface TableSectionProps extends HTMLAttributes<HTMLTableSectionElement> {

package/src/components/Table/TableSortHandle.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { getToken as token } from 'theming'
 import { Icon } from 'components/Icon'
 import { Box as DefaultBox } from 'components/Layout'
-import { SortDirection } from './useSortBy.types'
+import type { SortDirection } from './useSortBy.types'
 
 import type { BoxProps } from 'components/Layout/Box'
 

package/src/components/TablePagination/RowsPerPage.tsx

@@ -3,8 +3,8 @@ import { Text } from 'components/Text'
 import { Dropdown, DropdownContext } from 'components/Dropdown'
 import { Layout } from 'components/Layout'
 import { Icon } from 'components/Icon'
-import { RowsPerPageProps } from './TablePagination.types'
-import { ButtonProps } from 'components/Button'
+import type { RowsPerPageProps } from './TablePagination.types'
+import type { ButtonProps } from 'components/Button'
 import { NoPaddingButton } from './TablePagination.styles'
 
 const TriggerButton = (props: Omit<ButtonProps, 'scale' | 'variant'>) => {

package/src/components/TablePagination/TablePagination.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import TablePagination from './TablePagination'
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { Meta, Story } from '@storybook/react/types-6-0'
 
 import type { TablePaginationProps } from './TablePagination.types'
 import { Layout } from 'components/Layout'

package/src/components/TablePagination/TablePagination.test.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import renderer, { screen } from '../../../tests/renderer'
 
 import TablePagination from './TablePagination'
-import { TablePaginationProps } from './TablePagination.types'
+import type { TablePaginationProps } from './TablePagination.types'
 
 describe('TablePagination', () => {
   const setup = ({ ...overrides }: Partial<TablePaginationProps> = {}) => {

package/src/components/TablePagination/TablePagination.types.ts

@@ -1,4 +1,4 @@
-import { GroupProps } from 'components/Layout/Group'
+import type { GroupProps } from 'components/Layout/Group'
 
 export interface TablePaginationProps extends GroupProps {
   /**

package/src/components/TablePagination/TablePaginationActions.tsx

@@ -3,7 +3,7 @@ import React, { ChangeEvent, KeyboardEvent, useEffect, useState } from 'react'
 import { Layout } from 'components/Layout'
 import { Text } from 'components/Text'
 import { TextField } from 'components/TextField'
-import { TablePaginationActionsProps } from 'components/TablePagination/TablePagination.types'
+import type { TablePaginationActionsProps } from 'components/TablePagination/TablePagination.types'
 import styled from 'styled-components'
 import { Icon, IconProps } from 'components/Icon'
 import Keyboard from 'utils/toolset/keyboard'

package/src/components/Tabs/Tabs.tsx

@@ -26,8 +26,8 @@ const TabsItemsWrapper = styled.ul`
   padding: 0;
 
   border-bottom-color: ${token('color-neutral-lighter')};
-  border-bottom-width: 2px;
   border-bottom-style: solid;
+  border-bottom-width: 2px;
 `
 
 const StyledSpan = styled.span`
@@ -48,50 +48,44 @@ const Leading = styled(StyledSpan)`
 `
 
 const StyledLabel = styled.label<WithActiveProps & WithDirectionProps>`
-  ${font({
-    height: 'font-height-2',
-    weight: 'font-weight-bold',
-  })}
-  ${transition()}
-
-  font-size: ${token('font-size-4')};
-  text-transform: uppercase;
-
-  ${hoverable`
-    color: ${token('color-neutral-darker')};
-    background-color: ${token('color-neutral-light')}33;
-  `}
-
-  ${disableable`
-    color: ${token('color-neutral-dark')}33;
-    background-color: ${token('color-neutral-light')}33;
-  `}
-
-  padding: ${token('space-m')} ${token('space-l')};
+  position: relative;
+  bottom: -2px;
   display: inline-flex;
   flex-direction: ${conditional({
     row: whenProps({ direction: 'horizontal' }),
     column: whenProps({ direction: 'vertical' }),
   })};
+  padding: ${token('space-m')} ${token('space-l')};
+  font-size: ${token('font-size-4')};
 
-  cursor: pointer;
-
-  position: relative;
-  bottom: -2px;
+  color: ${conditional({
+    'color-neutral': whenProps({ active: false }),
+    'neutral-darker': whenProps({ active: true }),
+  })};
+  text-transform: uppercase;
 
-  border-bottom-width: 2px;
-  border-bottom-style: solid;
+  cursor: pointer;
 
   border-color: ${conditional({
     'color-transparent': whenProps({ active: false }),
     'color-primary': whenProps({ active: true }),
   })};
+  border-bottom-style: solid;
+  border-bottom-width: 2px;
 
-  color: ${conditional({
-    'color-neutral': whenProps({ active: false }),
-    'neutral-darker': whenProps({ active: true }),
-  })};
-
+  ${font({
+    height: 'font-height-2',
+    weight: 'font-weight-bold',
+  })}
+  ${transition()}
+  ${hoverable`
+    color: ${token('color-neutral-darker')};
+    background-color: ${token('color-neutral-light')}33;
+  `}
+  ${disableable`
+    color: ${token('color-neutral-dark')}33;
+    background-color: ${token('color-neutral-light')}33;
+  `}
   ${Leading} + ${Children} {
     margin: ${conditional({
         '0': whenProps({ direction: 'horizontal' }),

package/src/components/Tag/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Tag, { TagProps } from './Tag'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 
 import { Icon as MirandaIcon } from '../Icon'
 import generator from '../../../tests/generator'

package/src/components/Tag/Tag.tsx

@@ -39,44 +39,28 @@ export interface TagProps extends React.HTMLAttributes<HTMLElement>, WithSizePro
 
 // styled elements
 const StyledTag = styled.span`
-  display: inline-flex;
-
   position: relative;
+  z-index: 0;
+  display: inline-flex;
 
   width: auto;
 
-  z-index: 0;
-
   ${disableable`
     opacity: ${token('opacity-60')};
   `}
 `
 
 const StyledSpan = styled.span<TagProps>`
-  ${transition()}
-
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 
-  box-sizing: border-box;
-
-  text-decoration: none;
-
-  ${typography(
-    conditional({
-      'chips-sm': whenProps({ size: 'small' }),
-      'caption-bold': whenProps({ size: 'default' }),
-      'body-bold': whenProps({ size: 'large' }),
-    })
-  )}
-
-  line-height: initial;
-
-  text-transform: ${conditional({
-    'tag-transform': whenProps({ size: 'default' }),
-    'tag-small-transform': whenProps({ size: 'small' }),
-    'tag-large-transform': whenProps({ size: 'large' }),
+  min-width: ${token('tag-width')};
+  height: ${conditional({
+    'tag-height': whenProps({ size: 'default' }),
+    'tag-small-height': whenProps({ size: 'small' }),
+    'tag-large-height': whenProps({ size: 'large' }),
   })};
 
   padding: ${conditional({
@@ -85,13 +69,7 @@ const StyledSpan = styled.span<TagProps>`
     'tag-small-spacing-removable': whenProps([{ size: 'small', removable: true }]),
   })};
 
-  min-width: ${token('tag-width')};
-  height: ${conditional({
-    'tag-height': whenProps({ size: 'default' }),
-    'tag-small-height': whenProps({ size: 'small' }),
-    'tag-large-height': whenProps({ size: 'large' }),
-  })};
-
+  line-height: initial;
   color: ${conditional({
     'tag-default-color': whenProps({ variant: 'default' }),
     'tag-outlined-color': whenProps({ variant: 'outlined' }),
@@ -101,6 +79,14 @@ const StyledSpan = styled.span<TagProps>`
     'tag-danger-color': whenProps({ variant: 'danger' }),
   })};
 
+  text-decoration: none;
+
+  text-transform: ${conditional({
+    'tag-transform': whenProps({ size: 'default' }),
+    'tag-small-transform': whenProps({ size: 'small' }),
+    'tag-large-transform': whenProps({ size: 'large' }),
+  })};
+
   background: ${conditional({
     'tag-default-background': whenProps({ variant: 'default' }),
     'tag-outlined-background': whenProps({ variant: 'outlined' }),
@@ -110,10 +96,6 @@ const StyledSpan = styled.span<TagProps>`
     'tag-danger-background': whenProps({ variant: 'danger' }),
   })};
 
-  border-radius: ${token('tag-border-radius')};
-  border-width: ${token('tag-border-width')};
-  border-style: solid;
-
   border-color: ${conditional({
     'tag-default-border-color': whenProps({ variant: 'default' }),
     'tag-outlined-border-color': whenProps({ variant: 'outlined' }),
@@ -122,7 +104,18 @@ const StyledSpan = styled.span<TagProps>`
     'tag-warning-border-color': whenProps({ variant: 'warning' }),
     'tag-danger-border-color': whenProps({ variant: 'danger' }),
   })};
+  border-style: solid;
+  border-width: ${token('tag-border-width')};
+  border-radius: ${token('tag-border-radius')};
 
+  ${transition()}
+  ${typography(
+    conditional({
+      'chips-sm': whenProps({ size: 'small' }),
+      'caption-bold': whenProps({ size: 'default' }),
+      'body-bold': whenProps({ size: 'large' }),
+    })
+  )}
   ${hoverable`
     background: ${conditional({
       'tag-default-background--hover': whenProps([
@@ -205,7 +198,6 @@ const StyledSpan = styled.span<TagProps>`
       ]),
     })};
   `}
-
   ${focusable`
     color: ${conditional({
       'tag-default-color--focus': whenProps({ variant: 'default' }),
@@ -225,7 +217,6 @@ const StyledSpan = styled.span<TagProps>`
     })};
     box-shadow: ${token('tag-outline')};
   `}
-
   ${disableable`
     opacity: ${token('opacity-60')};
   `}
@@ -248,14 +239,8 @@ const StyledCloseButton = styled.button<WithSizeProps & WithVariantProps>`
   z-index: 2;
 
   display: inline-flex;
-  justify-content: center;
   align-items: center;
-
-  cursor: pointer;
-
-  background: ${token('tag-remove-button-background')};
-  border-radius: ${token('tag-remove-button-border-radius')};
-  border: 0;
+  justify-content: center;
 
   width: ${conditional({
     'tag-remove-button-size': whenProps({ size: 'default' }),
@@ -271,6 +256,12 @@ const StyledCloseButton = styled.button<WithSizeProps & WithVariantProps>`
 
   padding: 0;
 
+  cursor: pointer;
+
+  background: ${token('tag-remove-button-background')};
+  border: 0;
+  border-radius: ${token('tag-remove-button-border-radius')};
+
   ${disableable`
     opacity: ${token('opacity-60')};
   `}

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

package/src/components/Text/Text.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 import typography, { TypographyOptions, TypographyVariants } from 'styles/typography'

package/src/components/TextField/TextField.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import TextField, { TextFieldProps } from './TextField'
-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/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 {