@loadsmart/loadsmart-ui 5.10.1 → 5.11.1

package/src/components/Tag/Tag.tsx

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

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import renderer, { screen } from '../../../tests/renderer'
-import generators from '../../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
+import generators from '../../tests/generator'
 import typography from '../../styles/typography'
 
 import { Text } from '.'

package/src/components/TextField/TextField.test.tsx

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

package/src/components/TextField/TextField.tsx

@@ -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' }),
   })};
 
-  color: ${conditional({
-    'text-field-color': whenProps({ scheme: 'light' }),
-    'text-field-dark-color': whenProps({ scheme: 'dark' }),
-  })};
+  border-radius: ${token('text-field-border-radius')};
+  border-width: 1px;
+  border-style: solid;
+
   background: ${conditional({
     'text-field-background': whenProps({ scheme: 'light' }),
     'text-field-dark-background': whenProps({ scheme: 'dark' }),
@@ -66,9 +66,11 @@ const InputWrapper = styled.div<WithAdditionalProps>`
     'text-field-danger-border-color': whenProps({ status: Status.Danger }),
     'text-field-success-border-color': whenProps({ status: Status.Success }),
   })};
-  border-style: solid;
-  border-width: 1px;
-  border-radius: ${token('text-field-border-radius')};
+
+  color: ${conditional({
+    'text-field-color': whenProps({ scheme: 'light' }),
+    'text-field-dark-color': whenProps({ scheme: 'dark' }),
+  })};
 
   ${hoverable`
     background: ${conditional({
@@ -136,8 +138,14 @@ export const Trailing = styled(StyledSpan)<WithAdditionalProps>`
 `
 
 const StyledInput = styled.input<WithAdditionalProps>`
-  flex: 1;
-  min-width: 0;
+  ${transition()}
+
+  ${font({
+    height: 'text-field-font-height',
+  })}
+
+  background: transparent;
+
   padding: ${conditional({
       'text-field-padding-y': whenProps({ scale: 'default' }),
       'text-field-small-padding-y': whenProps({ scale: 'small' }),
@@ -151,13 +159,12 @@ const StyledInput = styled.input<WithAdditionalProps>`
       'text-field-small-padding-x': whenProps({ scale: 'small' }),
     })};
 
-  background: transparent;
   border: none;
 
-  ${transition()}
-  ${font({
-    height: 'text-field-font-height',
-  })}
+  flex: 1;
+
+  min-width: 0;
+
   ${focusable()}
   ${disableable()}
 

package/src/components/Textarea/Textarea.test.tsx

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

package/src/components/Textarea/Textarea.tsx

@@ -48,10 +48,9 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     'textarea-large-font-size': whenProps({ scale: 'large' }),
   })};
 
-  color: ${conditional({
-    'textarea-color': whenProps({ scheme: 'light' }),
-    'textarea-dark-color': whenProps({ scheme: 'dark' }),
-  })};
+  border-radius: ${token('textarea-border-radius')};
+  border-width: 1px;
+  border-style: solid;
 
   background: ${conditional({
     'textarea-background': whenProps({ scheme: 'light' }),
@@ -64,9 +63,11 @@ const TextareaWrapper = styled.div<WithAdditionalProps>`
     'textarea-danger-border-color': whenProps({ status: Status.Danger }),
     'textarea-success-border-color': whenProps({ status: Status.Success }),
   })};
-  border-style: solid;
-  border-width: 1px;
-  border-radius: ${token('textarea-border-radius')};
+
+  color: ${conditional({
+    'textarea-color': whenProps({ scheme: 'light' }),
+    'textarea-dark-color': whenProps({ scheme: 'dark' }),
+  })};
 
   ${hoverable`
     background: ${conditional({
@@ -119,30 +120,36 @@ 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>`
-  flex: 1 0 auto;
+  ${transition()}
+
+  ${font({
+    height: 'textarea-font-height',
+  })}
+
+  background: transparent;
 
   padding: ${conditional({
       'textarea-padding-y': whenProps({ scale: 'default' }),
@@ -150,19 +157,17 @@ 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;
 
-  ${transition()}
-  ${font({
-    height: 'textarea-font-height',
-  })}
+  flex: 1 0 auto;
+
   ${focusable()}
   ${disableable()}
 `

package/src/components/Toast/Toast.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 
-import renderer from '../../../tests/renderer'
-import generator from '../../../tests/generator'
+import renderer from '../../tests/renderer'
+import generator from '../../tests/generator'
 
 import Toast from './Toast'
 

package/src/components/Toast/Toast.tsx

@@ -18,11 +18,11 @@ const Container = styled.div<ContainerProps>`
   max-width: 100%;
   padding: ${token('toast-padding-y')} ${token('toast-padding-x')};
   overflow: hidden;
-  font-size: ${token('toast-font-size')};
-  font-weight: ${token('toast-font-weight')};
-  line-height: ${token('toast-font-height')};
 
   color: ${token('toast-font-color')};
+  font-weight: ${token('toast-font-weight')};
+  font-size: ${token('toast-font-size')};
+  line-height: ${token('toast-font-height')};
 
   background: ${conditional({
     'toast-neutral-background': whenProps({ status: Status.Neutral }),

package/src/components/ToggleGroup/Toggle.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import generator from '../../../tests/generator'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen, fire } from '../../tests/renderer'
 import Toggle from './Toggle'
 import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
 

package/src/components/ToggleGroup/Toggle.tsx

@@ -14,13 +14,6 @@ import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
 import type { ToggleGroupOptionProps, ToggleGroupType } from './ToggleGroup.types'
 
 const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
-  padding: ${token('space-xs')} ${token('space-s')};
-
-  color: ${conditional({
-    'color-neutral-darker': whenProps({ 'aria-checked': false }),
-    'color-neutral-white': whenProps({ 'aria-checked': true }),
-  })};
-
   background: ${conditional({
     'color-transparent': whenProps({ 'aria-checked': false }),
     'color-neutral-darkest': whenProps({ 'aria-checked': true }),
@@ -34,6 +27,13 @@ const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
     'color-transparent': whenProps({ $type: 'single', 'aria-checked': false }),
   })};
 
+  color: ${conditional({
+    'color-neutral-darker': whenProps({ 'aria-checked': false }),
+    'color-neutral-white': whenProps({ 'aria-checked': true }),
+  })};
+
+  padding: ${token('space-xs')} ${token('space-s')};
+
   ${hoverable`
     border-color: ${conditional({
       'color-neutral-dark': whenProps({ $type: 'multiple' }),

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -87,6 +87,19 @@ Playground.args = {
   scale: 'default',
 }
 
+const withIconOptions = [
+  {
+    label: 'Above',
+    value: true,
+    leading: <span>&clubs;</span>,
+  },
+  {
+    label: 'Below',
+    value: false,
+    leading: <span>&spades;</span>,
+  },
+]
+
 export const WithIcon: Story<ToggleGroupProps> = (args) => {
   return (
     <div className="flex flex-row">
@@ -97,18 +110,7 @@ export const WithIcon: Story<ToggleGroupProps> = (args) => {
           aria-labelledby="rank_options_label"
           id="rank_options"
           name="rank_options"
-          options={[
-            {
-              label: 'Above',
-              value: true,
-              leading: <span>&clubs;</span>,
-            },
-            {
-              label: 'Below',
-              value: false,
-              leading: <span>&spades;</span>,
-            },
-          ]}
+          options={withIconOptions}
         />
       </div>
 

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -3,8 +3,8 @@ import { composeStories } from '@storybook/testing-react'
 
 import { OPTIONS } from './ToggleGroup.constants'
 import * as stories from './ToggleGroup.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import type { ToggleGroupProps, ToggleGroupOptionProps } from './ToggleGroup.types'
 

package/src/components/Tooltip/Tooltip.test.tsx

@@ -3,8 +3,8 @@ import { screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import Tooltip from './Tooltip'
-import generator from '../../../tests/generator'
-import renderer from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer from '../../tests/renderer'
 
 const setup = ({ ...overrides }) => renderer(<Tooltip message="" {...overrides} />).render()
 

package/src/components/Tooltip/Tooltip.tsx

@@ -32,10 +32,10 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
 type ContainerProps = Pick<TooltipProps, 'scheme'>
 
 const Container = styled.div<ContainerProps>`
-  position: relative;
-
   display: inline-block;
 
+  position: relative;
+
   cursor: help;
 
   ${focusable`
@@ -49,22 +49,31 @@ const Container = styled.div<ContainerProps>`
 type BubbleProps = Pick<TooltipProps, 'position' | 'align'>
 
 const Bubble = styled.span<BubbleProps>`
-  position: absolute;
-  z-index: ${token('z-index-tooltip')};
+  ${font({
+    weight: 'font-weight-medium',
+    height: 'font-height-3',
+  })}
+
+  ${transition()}
+
+  white-space: initial;
 
-  width: max-content;
   min-width: ${token('tooltip-min-width')};
   max-width: ${token('tooltip-max-width')};
+  width: max-content;
+
+  position: absolute;
+  z-index: ${token('z-index-tooltip')};
+
+  background: ${token('tooltip-background')};
+  box-shadow: ${token('tooltip-shadow')};
+  border-radius: ${token('tooltip-border-radius')};
 
   padding: ${token('tooltip-padding-y')} ${token('tooltip-padding-x')};
 
+  color: ${token('tooltip-color')};
   font-size: ${token('tooltip-font-size')};
   line-height: ${token('tooltip-font-height')};
-  color: ${token('tooltip-color')};
-  white-space: initial;
-  background: ${token('tooltip-background')};
-  border-radius: ${token('tooltip-border-radius')};
-  box-shadow: ${token('tooltip-shadow')};
 
   ${({ position }) =>
     position === TooltipPosition.Top &&
@@ -109,26 +118,19 @@ const Bubble = styled.span<BubbleProps>`
 
       transform: translate(100%, -50%);
     `};
-
-  ${font({
-    weight: 'font-weight-medium',
-    height: 'font-height-3',
-  })}
-
-  ${transition()}
 `
 
 type ArrowProps = Pick<TooltipProps, 'position'>
 const Arrow = styled.span<ArrowProps>`
-  position: absolute;
-  z-index: 1;
-
   width: 0;
   height: 0;
 
   background: transparent;
   border-style: solid;
 
+  position: absolute;
+  z-index: 1;
+
   ${({ position }) =>
     position === TooltipPosition.Top &&
     css`

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

@@ -2,8 +2,8 @@ import React from 'react'
 
 import { Logo } from './'
 import type { LogoProps } from './Logo'
-import renderer, { screen } from '../../../../tests/renderer'
-import generators from '../../../../tests/generator'
+import renderer, { screen } from '../../../tests/renderer'
+import generators from '../../../tests/generator'
 
 function setup(props: LogoProps) {
   return renderer(<Logo {...props} />).render()

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { ThemeProvider } from 'styled-components'
-import renderer, { screen, user } from '../../../../tests/renderer'
+import renderer, { screen, user } from '../../../tests/renderer'
 import { Menu } from './'
 import type { MenuProps } from './Menu'
 import { Alice } from '../../../theming/themes'

package/src/components/TopNavigation/Menu/MenuItemDropdown.tsx

@@ -27,8 +27,8 @@ const MenuDropdownTrigger = styled(DropdownTrigger.Handle)`
 export const MenuDropdownLabel = styled.label`
   ${transition()}
 
-  display: flex;
   align-items: center;
+  display: flex;
 
   ${typography('body-bold', { color: 'top-navigation-item-color' })}
 

package/src/components/TopNavigation/OpenSideNavButton/OpenSideNavButton.tsx

@@ -11,10 +11,10 @@ export type OpenSideNavButtonProps = {
 
 const Container = styled.button`
   margin-right: ${token('space-2xl')};
-  cursor: pointer;
 
   background: none;
   border: none;
+  cursor: pointer;
 `
 
 function OpenSideNavButton({ className, onClick }: OpenSideNavButtonProps): JSX.Element {

package/src/components/VisuallyHidden/VisuallyHidden.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
 
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 
 import hiddenStyle from 'styles/hidden'
 import { VisuallyHidden } from './VisuallyHidden'

package/src/hooks/useClickOutside/useClickOutside.test.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import useClickOutside from './useClickOutside'
 interface ExperimentProps {

package/src/hooks/useDidMount/useDidMount.test.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 import useDidMount from './useDidMount'
 
 function Experiment() {

package/src/hooks/useFocusTrap/useFocusTrap.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import renderer, { screen, fire, user } from '../../../tests/renderer'
+import renderer, { screen, fire, user } from '../../tests/renderer'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './useFocusTrap.stories'

package/src/hooks/useFocusWithin/useFocusWithin.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import renderer, { screen, fire } from '../../../tests/renderer'
+import renderer, { screen, fire } from '../../tests/renderer'
 
 import useFocusWithin from './useFocusWithin'
 

package/src/hooks/useHeightExpansionToggler/useHeightExpansionToggler.test.tsx

@@ -1,7 +1,7 @@
 import { act, waitFor } from '@testing-library/react'
 import React, { useRef, useState } from 'react'
 
-import renderer, { screen, fire, user } from '../../../tests/renderer'
+import renderer, { screen, fire, user } from '../../tests/renderer'
 
 import useHeightExpansionToggler from './useHeightExpansionToggler'