@loadsmart/loadsmart-ui 5.9.0 → 5.10.1

package/src/components/Steps/ProgressSteps/ProgressStep.tsx

@@ -60,32 +60,18 @@ const ProgressStepContainer = styled.div`
 `
 
 const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
-  ${transition()}
-
-  ${font({
-    weight: 'font-weight-bold',
-    height: 'steps-indicator-size',
-  })}
-
-  font-size: ${token('font-size-4')};
-
-  height: ${token('steps-indicator-size')};
-  width: ${token('steps-indicator-size')};
-
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  width: ${token('steps-indicator-size')};
+  height: ${token('steps-indicator-size')};
+  font-size: ${token('font-size-4')};
 
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${conditional({
-    'color-accent': whenProps([
-      { current: true, complete: [true, false] },
-      { current: false, complete: true },
-    ]),
+  color: ${conditional({
     'color-neutral': whenProps({ current: false, complete: false }),
+    'color-neutral-white': whenProps({ current: false, complete: true }),
+    'color-accent': whenProps({ current: true }),
   })};
-  border-radius: ${token('border-radius-circle')};
 
   background: ${conditional({
     'color-accent': whenProps([{ current: false, complete: true }]),
@@ -95,41 +81,47 @@ const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
     ]),
   })};
 
-  color: ${conditional({
+  border-color: ${conditional({
+    'color-accent': whenProps([
+      { current: true, complete: [true, false] },
+      { current: false, complete: true },
+    ]),
     'color-neutral': whenProps({ current: false, complete: false }),
-    'color-neutral-white': whenProps({ current: false, complete: true }),
-    'color-accent': whenProps({ current: true }),
   })};
-`
+  border-style: solid;
+  border-width: 2px;
+  border-radius: ${token('border-radius-circle')};
 
-const StepLabel = styled.span<{ current: boolean; complete: boolean }>`
+  ${transition()}
   ${font({
-    height: 'font-height-2',
+    weight: 'font-weight-bold',
+    height: 'steps-indicator-size',
   })}
+`
 
+const StepLabel = styled.span<{ current: boolean; complete: boolean }>`
   position: relative;
 
+  display: flex;
+  flex-direction: row;
+
+  align-items: center;
+  justify-content: center;
+
+  margin: ${token('space-xs')} 0 0 0;
+  font-size: ${token('font-size-4')};
   font-weight: ${conditional({
     'font-weight-medium': whenProps({ current: false }),
     'font-weight-bold': whenProps({ current: true }),
   })};
-
   color: ${conditional({
     'color-neutral-darker': whenProps([{ current: true }, { current: false, complete: true }]),
     'color-neutral': whenProps({ current: false, complete: false }),
   })};
-
-  font-size: ${token('font-size-4')};
-
-  display: flex;
-  flex-direction: row;
-
-  align-items: center;
-  justify-content: center;
-
   text-align: center;
-
-  margin: ${token('space-xs')} 0 0 0;
+  ${font({
+    height: 'font-height-2',
+  })}
 `
 
 function ProgressStep(props: { step: Step; current: boolean; indicator: ReactNode }): JSX.Element {

package/src/components/Steps/Steps.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 { Button } from '../Button'
 import { STEPS, CONTENTS } from './Steps.fixtures'

package/src/components/Steps/Steps.tsx

@@ -1,4 +1,5 @@
-import React, { PropsWithChildren, useEffect } from 'react'
+import React, { useEffect } from 'react'
+import type { PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 import { check, getPanelRadioID } from './Steps.helpers'

package/src/components/Steps/StepsStep.tsx

@@ -1,4 +1,5 @@
-import React, { Fragment, PropsWithChildren, useContext } from 'react'
+import React, { Fragment, useContext } from 'react'
+import type { PropsWithChildren } from 'react'
 import styled from 'styled-components'
 
 import { getPanelRadioID } from './Steps.helpers'

package/src/components/Switch/Switch.stories.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEvent, useState } from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import Switch, { SwitchProps } from './Switch'
 

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'