@loadsmart/loadsmart-ui 5.10.1 → 5.11.1

package/src/components/Label/Label.test.tsx

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

package/src/components/Label/Label.tsx

@@ -56,9 +56,9 @@ const StyledChildren = styled.span<WithAdditionalProps>`
 
 const StyledRequired = styled.sup`
   top: 0;
-  font-size: ${token('label-font-size')};
 
   color: ${token('label-required-color')};
+  font-size: ${token('label-font-size')};
 `
 
 const StyledTooltipAnchor = styled.span<WithAdditionalProps>`
@@ -68,13 +68,13 @@ const StyledTooltipAnchor = styled.span<WithAdditionalProps>`
   width: 16px;
   height: 16px;
   margin: 0 0 0 ${token('label-tooltip-margin-left')};
-  font-size: ${token('label-tooltip-font-size')};
-  font-weight: ${token('label-tooltip-font-weight')};
 
   color: ${conditional({
     'label-tooltip-font-color': whenProps({ scheme: 'light' }),
     'label-tooltip-dark-font-color': whenProps({ scheme: 'dark' }),
   })};
+  font-weight: ${token('label-tooltip-font-weight')};
+  font-size: ${token('label-tooltip-font-size')};
 
   background: ${conditional({
     'label-tooltip-background-color': whenProps({ scheme: 'light' }),

package/src/components/Link/Link.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { screen } from '@testing-library/react'
-import renderer from '../../../tests/renderer'
+import renderer from '../../tests/renderer'
 import Link from './Link'
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 describe('<Link />', () => {
   describe('default', () => {

package/src/components/Link/Link.tsx

@@ -17,27 +17,31 @@ export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 
 const StyledBaseAnchor = styled.a`
+  ${font({
+    height: 'link-font-height',
+    weight: 'link-font-weight',
+  })}
+  ${transition()}
+
+  ${ellipsizable()}
+
   display: inline-flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  min-height: 24px;
+  text-align: center;
   font-size: ${token('link-font-size')};
   color: ${token('color-neutral-darker')};
-  text-align: center;
   text-decoration: none;
 
-  ${font({
-    height: 'link-font-height',
-    weight: 'link-font-weight',
-  })}
-  ${ellipsizable()}
-  ${transition()}
+  min-height: 24px;
+
   ${hoverable`
     text-decoration: underline;
     font-weight: ${token('link-font-weight--hover')};
   `}
+
   ${disableable``}
 
   ${({ children }) =>
@@ -49,13 +53,13 @@ const StyledBaseAnchor = styled.a`
         overflow: hidden;
 
         font-weight: ${token('link-font-weight--hover')};
-        pointer-events: none;
 
         visibility: hidden;
 
         content: attr(data-text);
         content: attr(data-text) / '';
         user-select: none;
+        pointer-events: none;
 
         @media speech {
           display: none;

package/src/components/Loaders/LoadingBar.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import type { Story, Meta } from '@storybook/react/types-6-0'
 import { Text } from 'components/Text'
 
-import { LoadingBarProps } from './LoadingBar'
+import type { LoadingBarProps } from './LoadingBar'
 
 import LoadingBar from './LoadingBar'
 
@@ -12,7 +12,7 @@ export default {
   argTypes: {},
 } as Meta
 
-export const Playground: Story<LoadingBarProps> = (args: LoadingBarProps) => {
+export const Playground: Story<LoadingBarProps> = (args) => {
   return (
     <div className="flex flex-col space-y-2">
       <div className="flex items-center">

package/src/components/Loaders/LoadingBar.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './LoadingBar.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { LoadingBarProps } from './LoadingBar'
 

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.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './LoadingDots.stories'
-import renderer, { screen } from '../../../tests/renderer'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { LoadingDotsProps } from './LoadingDots'
 

package/src/components/Loaders/Spinner.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './Spinner.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { SpinnerProps } from './Spinner'
 

package/src/components/Modal/Modal.test.tsx

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

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')};
-  padding-bottom: ${token('space-s')};
   margin-bottom: ${token('space-l')};
+  padding-bottom: ${token('space-s')};
 
   border-bottom: 1px solid ${token('color-neutral-light')};
 `
@@ -71,15 +71,20 @@ const Close = styled(CloseButton).attrs({
 `
 
 const Content = styled.div<ContentProps>`
-  position: relative;
-  z-index: ${token('z-index-modal')};
-  padding: ${token('space-xl')};
-  margin: 0 auto;
   background: white;
   border-radius: ${token('border-radius-s')};
-  outline: none;
   box-shadow: ${token('shadow-modal')};
 
+  padding: ${token('space-xl')};
+
+  margin: 0 auto;
+
+  position: relative;
+
+  outline: none;
+
+  z-index: ${token('z-index-modal')};
+
   ${({ fullscreen }) =>
     fullscreen &&
     css`

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

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

package/src/components/Popover/Popover.test.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { composeStories } from '@storybook/testing-react'
 
 import * as stories from './Popover.stories'
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import type { PopoverProps } from './Popover'
 

package/src/components/ProgressBar/ProgressBar.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 { ProgressBar } from './ProgressBar'
 

package/src/components/ProgressBar/ProgressBar.tsx

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

package/src/components/Radio/Radio.test.tsx

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

package/src/components/Radio/Radio.tsx

@@ -21,37 +21,45 @@ 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;
 
-  width: ${token('radio-small-selector-size')};
-  height: ${token('radio-small-selector-size')};
-  color: white;
   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;
+
   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.test.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react'
 
-import generator from '../../../tests/generator'
-import renderer, { screen } from '../../../tests/renderer'
+import generator from '../../tests/generator'
+import renderer, { screen } from '../../tests/renderer'
 
 import Section from './Section'
 

package/src/components/Section/Section.tsx

@@ -12,16 +12,18 @@ const StyledSection = styled.section`
 `
 
 const StyledSectionTitle = styled.section`
-  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')};
-
   ${font({
     weight: 'font-weight-bold',
     height: 'font-height-2',
   })}
+
+  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')};
 `
 
 const StyledSpan = styled.span`

package/src/components/Section/Sections.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta } from '@storybook/react/types-6-0'
 import Section from './Section'
 import type { SectionProps } from './Section'
 
-import generator from '../../../tests/generator'
+import generator from '../../tests/generator'
 
 export default {
   title: 'Components/Section',

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

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

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

@@ -15,7 +15,7 @@ import type {
   SelectProps,
 } from './Select.types'
 import { useSelect } from '.'
-import generators from '../../../tests/generator'
+import generators from '../../tests/generator'
 
 export default {
   title: 'Components/Select',
@@ -32,7 +32,7 @@ export const Playground: Story<SelectProps> = (args: SelectProps) => {
         <div className="flex-1">
           <Label htmlFor="select-playground">Select your favorite fruit</Label>
           <Select
-            options={FRUITS}
+            options={[...FRUITS]}
             placeholder="Select sync"
             {...omit(args, OMITTED_PROPS)}
             id="select-playground"