@loadsmart/loadsmart-ui 5.10.1 → 5.11.1

package/src/components/Select/SelectEmpty.tsx

@@ -5,19 +5,20 @@ import { getToken as token } from 'theming'
 import type { SelectEmptyProps } from './Select.types'
 
 const Wrapper = styled.div`
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
-  padding: ${token('space-s')};
+
+  box-sizing: border-box;
   margin: 0 ${token('space-s')};
+  padding: ${token('space-s')};
+
+  color: ${token('color-neutral')};
 
   font-size: 1em;
   line-height: ${token('font-height-3')};
 
-  color: ${token('color-neutral')};
-
   background: ${token('color-transparent')};
 `
 

package/src/components/Select/SelectTrigger.tsx

@@ -13,14 +13,19 @@ const GenericSelectTrigger = styled(GenericDropdownTrigger)`
 `
 
 const SelectTriggerSearchField = styled(TextField)`
-  flex: 1;
-  height: 100%;
-  background-color: transparent;
-  border: none;
-  border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
   ${focusable`
     box-shadow: none;
   `}
+
+  background-color: transparent;
+
+  border: none;
+  border-radius: ${token('border-radius-s')} 0 0 ${token('border-radius-s')};
+
+  height: 100%;
+
+  flex: 1;
+
   ${Trailing} {
     margin: 0 ${token('space-xs')} 0 0;
   }
@@ -32,8 +37,8 @@ const Separator = styled.span`
   margin: 0;
 
   border-right-color: ${token('color-neutral-light')};
-  border-right-style: solid;
   border-right-width: 1px;
+  border-right-style: solid;
 `
 
 const SelectTrigger = forwardRef<HTMLInputElement, SelectTriggerProps>(function SelectTrigger(

package/src/components/Select/useSelect.helpers.test.ts

@@ -1,5 +1,5 @@
 import { getDisplayValue, getValue } from './useSelect.helpers'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 import type { SelectAdapter, SelectValue, Option } from './Select.types'
 

package/src/components/SideNavigation/Logo/Logo.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { Logo } from './'
-import renderer, { screen } from '../../../../tests/renderer'
-import generator from '../../../../tests/generator'
+import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../../tests/generator'
 import type { LogoProps } from './Logo'
 
 const setup = ({ ...overrides }: LogoProps) => renderer(<Logo {...overrides} />).render()

package/src/components/SideNavigation/Menu/Menu.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { Menu } from './'
 import type { MenuProps } from './Menu'
-import renderer, { screen } from '../../../../tests/renderer'
-import generator from '../../../../tests/generator'
+import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../../tests/generator'
 import userEvent from '@testing-library/user-event'
 
 function setup(props: MenuProps) {

package/src/components/SideNavigation/Menu/Menu.tsx

@@ -13,11 +13,11 @@ import { styledCompounds } from 'utils/toolset/styledCompounds'
 const MenuTitle = styled.div`
   padding: ${token('space-s')} 0;
   padding-left: ${token('space-l')};
-  font-size: ${token('font-size-5')};
-  font-weight: ${token('font-weight-bold')};
-  line-height: ${token('font-height-3')};
 
   color: ${token('color-neutral')};
+  font-weight: ${token('font-weight-bold')};
+  font-size: ${token('font-size-5')};
+  line-height: ${token('font-height-3')};
   text-transform: uppercase;
 `
 

package/src/components/SideNavigation/Menu/MenuBaseItem.tsx

@@ -17,22 +17,23 @@ export type MenuBaseItemProps = HTMLAttributes<HTMLElement> & {
 }
 
 const StyledMenuItem = styled.button`
+  ${transition({ duration: '0.25s' })};
+
   display: flex;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
-  width: 100%;
   padding: ${token('space-s')} 0;
   padding-right: ${rem('12px')};
   padding-left: ${token('space-l')};
 
-  font-size: ${token('font-size-4')};
+  color: ${token('color-neutral-white')};
   font-weight: ${token('font-weight-bold')};
+  font-size: ${token('font-size-4')};
   line-height: ${token('font-height-3')};
-  color: ${token('color-neutral-white')};
 
   cursor: pointer;
 
-  ${transition({ duration: '0.25s' })};
   ${focusable`
     color: ${token('color-primary')};
   `}

package/src/components/SideNavigation/Menu/MenuExpandable.tsx

@@ -35,10 +35,11 @@ const StyledIcon = styled(Icon)<IExpandable>`
 `
 
 const ExpandableItems = styled.div<IExpandable>`
-  height: ${prop('$height', 0)}px;
   overflow: hidden;
-
   ${transition({ property: 'height' })}
+
+  height: ${prop('$height', 0)}px;
+
   ${MenuLink} {
     padding-left: ${token('space-xl')};
   }

package/src/components/SideNavigation/Separator/Separator.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { Separator } from './'
-import renderer from '../../../../tests/renderer'
+import renderer from '../../../tests/renderer'
 
 const setup = ({ ...overrides } = {}) => renderer(<Separator {...overrides} />).render()
 

package/src/components/SideNavigation/SideNavigation.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import { SideNavigation } from './'
-import renderer from '../../../tests/renderer'
-import generator from '../../../tests/generator'
+import renderer from '../../tests/renderer'
+import generator from '../../tests/generator'
 import type { SideNavigationProps } from './SideNavigation'
 
 function setup(props: SideNavigationProps) {

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

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

package/src/components/Steps/Steps.fixtures.ts

@@ -1,4 +1,4 @@
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export const STEPS = generator.array(({ index }) => {
   return {

package/src/components/Steps/Steps.test.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import { composeStory } from '@storybook/testing-react'
 
 import { STEPS, CONTENTS } from './Steps.fixtures'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 import Meta, { Playground as PlaygroundStory } from './Steps.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { StepsProps } from './Steps'
 import type { Step } from './Steps.types'

package/src/components/Steps/useStep.test.tsx

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 import useSteps from './useSteps'
 
 import type { Step } from './Steps.types'

package/src/components/Switch/Switch.test.tsx

@@ -3,7 +3,7 @@ import { composeStories } from '@storybook/testing-react'
 import userEvent from '@testing-library/user-event'
 
 import * as stories from './Switch.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 import type { SwitchProps } from './Switch'
 
 const { Playground } = composeStories(stories)

package/src/components/Switch/Switch.tsx

@@ -24,8 +24,19 @@ 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' }),
@@ -34,28 +45,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``}
 `
 
@@ -91,7 +102,6 @@ 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')};
 
@@ -99,6 +109,8 @@ const Slider = styled.span<WithAdditionalProps>`
       timingFunction: 'ease-out',
       duration: '150ms',
     })}
+
+    content: '';
   }
 `
 

package/src/components/Table/Table.fixtures.ts

@@ -1,4 +1,4 @@
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export const TABLE_COLUMNS = [
   {

package/src/components/Table/Table.test.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 import React from 'react'
-import renderer, { screen, user } from '../../../tests/renderer'
+import renderer, { screen, user } from '../../tests/renderer'
 
 import Table from './Table'
 import type { TableProps } from './Table.types'

package/src/components/Table/Table.tsx

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

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

@@ -1,7 +1,7 @@
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import TablePagination from './TablePagination'
 import type { TablePaginationProps } from './TablePagination.types'

package/src/components/Tabs/Tabs.test.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import renderer, { fire } from '../../../tests/renderer'
+import renderer, { fire } from '../../tests/renderer'
 import { screen } from '@testing-library/react'
 
 import Tabs from './Tabs'

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-style: solid;
   border-bottom-width: 2px;
+  border-bottom-style: solid;
 `
 
 const StyledSpan = styled.span`
@@ -48,44 +48,50 @@ const Leading = styled(StyledSpan)`
 `
 
 const StyledLabel = styled.label<WithActiveProps & WithDirectionProps>`
-  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')};
-
-  color: ${conditional({
-    'color-neutral': whenProps({ active: false }),
-    'neutral-darker': whenProps({ active: true }),
-  })};
-  text-transform: uppercase;
-
-  cursor: pointer;
-
-  border-color: ${conditional({
-    'color-transparent': whenProps({ active: false }),
-    'color-primary': whenProps({ active: true }),
-  })};
-  border-bottom-style: solid;
-  border-bottom-width: 2px;
-
   ${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')};
+  display: inline-flex;
+  flex-direction: ${conditional({
+    row: whenProps({ direction: 'horizontal' }),
+    column: whenProps({ direction: 'vertical' }),
+  })};
+
+  cursor: pointer;
+
+  position: relative;
+  bottom: -2px;
+
+  border-bottom-width: 2px;
+  border-bottom-style: solid;
+
+  border-color: ${conditional({
+    'color-transparent': whenProps({ active: false }),
+    'color-primary': whenProps({ active: true }),
+  })};
+
+  color: ${conditional({
+    'color-neutral': whenProps({ active: false }),
+    'neutral-darker': whenProps({ active: true }),
+  })};
+
   ${Leading} + ${Children} {
     margin: ${conditional({
         '0': whenProps({ direction: 'horizontal' }),

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

@@ -3,7 +3,7 @@ import Tag, { TagProps } from './Tag'
 import type { Meta } from '@storybook/react/types-6-0'
 
 import { Icon as MirandaIcon } from '../Icon'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export default {
   title: 'Components/Tag',

package/src/components/Tag/Tag.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
 import Tag from './Tag'
-import generator from '../../../tests/generator'
-import renderer from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Tag {...overrides} />).render()