@loadsmart/loadsmart-ui 5.10.0 → 5.10.1

package/src/components/Loaders/LoadingBar.tsx

@@ -29,12 +29,12 @@ export const Bar = styled.div<{ width?: number; velocity?: number }>`
     width: 100%;
     height: ${token('space-s')};
 
+    content: '';
+
     background-color: ${token('color-primary')};
 
     animation: ${loading} ${({ velocity }) => (velocity && velocity > 0 ? velocity : 2.5)}s linear
       infinite;
-
-    content: '';
   }
 `
 

package/src/components/Loaders/LoadingDots.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 'components/Button'
 
 import LoadingDots, { LoadingDotsProps } from './LoadingDots'

package/src/components/Loaders/Spinner.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 Spinner, { SpinnerProps } from './Spinner'
 

package/src/components/Modal/Modal.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 { useArgs } from '@storybook/client-api'
 import Modal from './Modal'
 import type { ModalProps } from './Modal'

package/src/components/Modal/Modal.tsx

@@ -52,13 +52,13 @@ const ModalWrapper = styled.div<ModalWrapperProps>`
 `
 
 const HeaderWrapper = styled.div`
+  box-sizing: content-box;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: content-box;
   height: ${token('space-xl')};
-  margin-bottom: ${token('space-l')};
   padding-bottom: ${token('space-s')};
+  margin-bottom: ${token('space-l')};
 
   border-bottom: 1px solid ${token('color-neutral-light')};
 `
@@ -71,19 +71,14 @@ const Close = styled(CloseButton).attrs({
 `
 
 const Content = styled.div<ContentProps>`
-  background: white;
-  border-radius: ${token('border-radius-s')};
-  box-shadow: ${token('shadow-modal')};
-
+  position: relative;
+  z-index: ${token('z-index-modal')};
   padding: ${token('space-xl')};
-
   margin: 0 auto;
-
-  position: relative;
-
+  background: white;
+  border-radius: ${token('border-radius-s')};
   outline: none;
-
-  z-index: ${token('z-index-modal')};
+  box-shadow: ${token('shadow-modal')};
 
   ${({ fullscreen }) =>
     fullscreen &&

package/src/components/Pagination/Pagination.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import Pagination from './Pagination'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 import type { PaginationProps } from './Pagination.types'
 

package/src/components/Pagination/Pagination.test.tsx

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

package/src/components/Pagination/Pagination.types.ts

@@ -1,6 +1,6 @@
-import { HTMLAttributes } from 'react'
+import type { HTMLAttributes } from 'react'
 
-import { ButtonProps } from 'components/Button'
+import type { ButtonProps } from 'components/Button'
 
 export type PaginationProps = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {
   /**

package/src/components/Popover/Popover.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 Popover from './Popover'
 

package/src/components/ProgressBar/ProgressBar.stories.tsx

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

package/src/components/ProgressBar/ProgressBar.tsx

@@ -5,19 +5,17 @@ import conditional, { whenProps } from 'tools/conditional'
 import Status from 'utils/types/Status'
 
 const Bar = styled.div<{ rounded: boolean }>`
-  align-items: center;
+  position: relative;
   display: flex;
   flex-grow: 0;
   flex-shrink: 1;
-
+  align-items: center;
   justify-content: center;
-  overflow: hidden;
   width: 100%;
-
-  position: relative;
-
   height: ${token('progressbar-height')};
 
+  overflow: hidden;
+
   ${({ rounded }) =>
     rounded &&
     css`

package/src/components/Radio/Radio.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Radio, { RadioProps } from './Radio'
-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/Radio/Radio.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,37 @@ export interface RadioProps extends InputHTMLAttributes<HTMLInputElement>, Selec
 const Check = styled(Icon)<SelectionStyleProps>`
   position: absolute;
   top: 50%;
-
   left: 50%;
 
   width: 10px;
   height: 10px;
 
-  transform: translate(-50%, -50%);
-
   pointer-events: none;
 
   fill: currentColor;
+
+  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('radio-small-selector-size')};
   width: ${token('radio-small-selector-size')};
-
-  border-radius: ${token('radio-selector-border-radius')};
-  border-width: ${token('button-border-width')};
-  border-style: solid;
-
+  height: ${token('radio-small-selector-size')};
+  color: white;
+  cursor: pointer;
   background: ${conditional({
     'radio-selector-background': whenProps({ scheme: 'light' }),
     'radio-dark-selector-background': whenProps({ scheme: 'dark' }),
   })};
+  appearance: none;
+  border-style: solid;
+  border-width: ${token('button-border-width')};
+  border-radius: ${token('radio-selector-border-radius')};
+  outline: none;
+  ${transition()}
 
   &:not(:checked) {
     border-color: ${conditional({

package/src/components/Section/Section.tsx

@@ -12,18 +12,16 @@ const StyledSection = styled.section`
 `
 
 const StyledSectionTitle = styled.section`
-  ${font({
-    weight: 'font-weight-bold',
-    height: 'font-height-2',
-  })}
-
+  padding: ${token('space-s')} ${token('space-xs')};
+  margin-bottom: ${token('space-l')};
   font-size: ${token('font-size-3')};
   color: ${token('color-neutral-darker')};
-
   border-bottom: 2px solid ${token('color-neutral-light')};
 
-  padding: ${token('space-s')} ${token('space-xs')};
-  margin-bottom: ${token('space-l')};
+  ${font({
+    weight: 'font-weight-bold',
+    height: 'font-height-2',
+  })}
 `
 
 const StyledSpan = styled.span`

package/src/components/Section/Sections.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 Section from './Section'
 import type { SectionProps } from './Section'
 

package/src/components/Select/Select.fixtures.ts

@@ -1,4 +1,4 @@
-import { SelectableKeyType } from 'hooks/useSelectable'
+import type { SelectableKeyType } from 'hooks/useSelectable'
 import generator from '../../../tests/generator'
 
 import type { SelectDatasource } from './Select.types'

package/src/components/Select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 import omit from 'lodash.omit'
 
 import { Label } from 'components/Label'

package/src/components/Select/Select.types.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import EventLike from 'utils/types/EventLike'
+import type EventLike from 'utils/types/EventLike'
 
 import type { DropdownMenuItemProps, DropdownProps } from 'components/Dropdown'
 import type { TextFieldProps } from 'components/TextField'
@@ -9,7 +9,7 @@ import type {
   SelectableKeyType,
   SelectableState,
 } from 'hooks/useSelectable'
-import { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
+import type { useSelectableReturn } from 'hooks/useSelectable/useSelectable.types'
 import type { ChangeEvent, ComponentType, FocusEvent, HTMLAttributes } from 'react'
 
 export type Option = Selectable

package/src/components/Select/SelectCreatableOption.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 import { Dropdown } from 'components/Dropdown'
 import { SelectContext } from './Select.context'
-import { SelectCreatableOptionProps } from './Select.types'
+import type { SelectCreatableOptionProps } from './Select.types'
 
 function SelectCreatableOption({ children, ...rest }: SelectCreatableOptionProps): JSX.Element {
   const select =

package/src/components/Select/SelectEmpty.tsx

@@ -2,23 +2,22 @@ import React from 'react'
 import styled from 'styled-components'
 
 import { getToken as token } from 'theming'
-import { SelectEmptyProps } from './Select.types'
+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;
-
-  box-sizing: border-box;
-  margin: 0 ${token('space-s')};
   padding: ${token('space-s')};
-
-  color: ${token('color-neutral')};
+  margin: 0 ${token('space-s')};
 
   font-size: 1em;
   line-height: ${token('font-height-3')};
 
+  color: ${token('color-neutral')};
+
   background: ${token('color-transparent')};
 `
 

package/src/components/Select/SelectOption.test.tsx

@@ -3,7 +3,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import SelectOption from './SelectOption'
 import { SelectContext } from './Select.context'
 import useSelect from './useSelect'
-import { Option, SelectOptionProps, SelectProps, useSelectReturn } from './Select.types'
+import type { Option, SelectOptionProps, SelectProps, useSelectReturn } from './Select.types'
 
 type Props = {
   optionProps: SelectOptionProps

package/src/components/Select/SelectTrigger.tsx

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

package/src/components/Select/components.tsx

@@ -1,4 +1,4 @@
-import { Components, CreatableOptionType } from './Select.types'
+import type { Components, CreatableOptionType } from './Select.types'
 import SelectCreatableOption from './SelectCreatableOption'
 import SelectEmpty from './SelectEmpty'
 import SelectOption from './SelectOption'

package/src/components/Select/useSelect.ts

@@ -7,7 +7,7 @@ import isEmpty from 'utils/toolset/isEmpty'
 import { useDropdown } from 'components/Dropdown'
 import { useDidMount } from 'hooks/useDidMount'
 import { useFocusTrap } from 'hooks/useFocusTrap'
-import { SelectableKeyType } from 'hooks/useSelectable'
+import type { SelectableKeyType } from 'hooks/useSelectable'
 import to from 'utils/toolset/awaitTo'
 import { isThenable } from 'utils/toolset/isThenable'
 import toArray from 'utils/toolset/toArray'

package/src/components/Select/useSelectExternal.ts

@@ -1,7 +1,7 @@
 import { useCallback, useContext } from 'react'
 
 import { SelectContext } from './Select.context'
-import { Option, useSelectExternalReturn } from './Select.types'
+import type { Option, useSelectExternalReturn } from './Select.types'
 
 export function useSelectExternal(): useSelectExternalReturn {
   const select =

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

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

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')};
-
-  color: ${token('color-neutral')};
-  font-weight: ${token('font-weight-bold')};
   font-size: ${token('font-size-5')};
+  font-weight: ${token('font-weight-bold')};
   line-height: ${token('font-height-3')};
+
+  color: ${token('color-neutral')};
   text-transform: uppercase;
 `
 

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

@@ -17,23 +17,22 @@ 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')};
 
-  color: ${token('color-neutral-white')};
-  font-weight: ${token('font-weight-bold')};
   font-size: ${token('font-size-4')};
+  font-weight: ${token('font-weight-bold')};
   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,11 +35,10 @@ const StyledIcon = styled(Icon)<IExpandable>`
 `
 
 const ExpandableItems = styled.div<IExpandable>`
-  overflow: hidden;
-  ${transition({ property: 'height' })}
-
   height: ${prop('$height', 0)}px;
+  overflow: hidden;
 
+  ${transition({ property: 'height' })}
   ${MenuLink} {
     padding-left: ${token('space-xl')};
   }

package/src/components/SideNavigation/SideNavigation.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 { Tag } from 'components/Tag'
 import { Icon } from 'components/Icon'

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'