@loadsmart/loadsmart-ui 5.11.0 → 5.11.1

package/src/components/Dialog/Dialog.tsx

@@ -23,11 +23,11 @@ export interface DialogProps extends WithScaleProps {
 
 const Header = styled.h1`
   padding-bottom: ${token('space-s')};
-  font-size: ${token('font-size-2')};
-  font-weight: ${token('font-weight-bold')};
-  line-height: ${token('font-height-2')};
 
   color: ${token('dialog-header-color')};
+  font-weight: ${token('font-weight-bold')};
+  font-size: ${token('font-size-2')};
+  line-height: ${token('font-height-2')};
   text-align: center;
 
   border-bottom: 1px solid ${token('dialog-header-border-color')};
@@ -35,10 +35,10 @@ const Header = styled.h1`
 const Body = styled.div`
   margin-top: ${token('space-l')};
   margin-bottom: ${token('space-l')};
-  font-size: ${token('font-size-4')};
-  line-height: ${token('font-height-3')};
 
   color: ${token('dialog-body-font-color')};
+  font-size: ${token('font-size-4')};
+  line-height: ${token('font-height-3')};
   text-align: center;
 `
 

package/src/components/DragDropFile/styles.tsx

@@ -29,31 +29,36 @@ export const DragDropFileWrapper = styled(Stack)<{ withFileList: boolean }>`
 export const DropZoneWrapper = styled((props: StackProps) => <Stack as="label" {...props} />)<
   Pick<DropZoneProps, 'disabled' | 'error'>
 >`
-  padding: ${getToken('space-l')} ${getToken('space-3xl')};
-  text-align: center;
+  ${transition({ property: 'border-color, box-shadow, opacity' })}
+
   cursor: pointer;
+
   background-color: ${getToken('color-neutral-white')};
+  border-radius: ${getToken('border-radius-s')};
+  border: 2px dashed;
   border-color: ${conditional({
     'color-neutral-light': whenProps({ error: false }),
     'color-danger': whenProps({ disabled: false, error: true }),
   })};
-  border-style: dashed;
-  border-width: 2px;
-  border-radius: ${getToken('border-radius-s')};
+
+  padding: ${getToken('space-l')} ${getToken('space-3xl')};
+
+  text-align: center;
 
   ${hoverable`
     border-color: ${conditional({
       'color-accent': whenProps({ disabled: false, error: false }),
     })};
   `}
+
   ${focusable`
     border-color: ${conditional({
       'color-accent': whenProps({ disabled: false, error: false }),
     })};
     box-shadow: ${getToken('shadow-glow-primary')};
   `}
+
   ${disableable()}
-  ${transition({ property: 'border-color, box-shadow, opacity' })}
 `
 
 export const HiddenInput = styled.input`

package/src/components/Drawer/Drawer.tsx

@@ -29,12 +29,12 @@ const StyledAside = styled.aside<Pick<DrawerProps, 'open'>>`
   width: 100%;
   height: 100%;
 
+  background: ${token('modal-overlay-background')};
+
   visibility: ${conditional({
     visible: whenProps({ open: true }),
     hidden: whenProps({ open: false }),
   })};
-
-  background: ${token('modal-overlay-background')};
 `
 
 const CloseButton = styled(DefaultCloseButton)`
@@ -81,15 +81,15 @@ const StyledHeader = styled.header`
   justify-content: center;
 
   padding: ${token('space-xl')};
-  font-size: ${token('font-size-2')};
-  font-weight: ${token('font-weight-bold')};
 
   color: ${token('color-neutral-darker')};
+  font-weight: ${token('font-weight-bold')};
+  font-size: ${token('font-size-2')};
   text-align: center;
 
   border-bottom-color: ${token('color-neutral-light')};
-  border-bottom-style: solid;
   border-bottom-width: 1px;
+  border-bottom-style: solid;
 `
 
 const StyledBody = styled.div`
@@ -108,8 +108,8 @@ const StyledFooter = styled.footer`
   padding: ${token('space-xl')};
 
   border-top-color: ${token('color-neutral-light')};
-  border-top-style: solid;
   border-top-width: 1px;
+  border-top-style: solid;
 `
 
 export interface DrawerHeaderProps {

package/src/components/Dropdown/DropdownMenu.tsx

@@ -66,32 +66,42 @@ const Children = styled.span`
 `
 
 const DropdownItemWrapper = styled.button`
+  ${transition()}
+
   display: inline-flex;
-  flex: 1 0;
-  align-items: center;
   justify-content: flex-start;
-  min-height: 36px;
-  padding: 0 ${token('space-s')};
-  margin: 0 ${token('space-s')};
-  font-size: ${token('font-size-4')};
-  color: ${token('color-neutral-darker')};
-  cursor: pointer;
-  background: ${token('color-neutral-white')};
-  border: none;
-  border-radius: ${token('border-radius-s')};
+  align-items: center;
 
   ${font({
     height: 'font-height-3',
     weight: 'font-weight-medium',
   })}
+  font-size: ${token('font-size-4')};
+
+  min-height: 36px;
+  flex: 1 0;
+
+  border: none;
+  border-radius: ${token('border-radius-s')};
+  background: ${token('color-neutral-white')};
+
+  color: ${token('color-neutral-darker')};
+
+  padding: 0 ${token('space-s')};
+
+  margin: 0 ${token('space-s')};
+
+  cursor: pointer;
+
   ${hoverable`
     background: ${token('color-neutral-lighter')};
   `}
+
   ${focusable`
     background: ${token('color-neutral-lighter')};
   `}
+
   ${disableable()}
-  ${transition()}
 
   ${Children} {
     flex: 1 0 auto;
@@ -114,14 +124,17 @@ const DropdownItemWrapper = styled.button`
 
 const DropdownSectionHeader = styled.strong`
   display: flex;
-  align-items: center;
   justify-content: flex-start;
-  margin: 0 ${token('space-s')};
-  font-size: ${token('font-size-4')};
+  align-items: center;
+
   ${font({
     height: 'font-height-3',
     weight: 'font-weight-bold',
   })}
+
+  font-size: ${token('font-size-4')};
+
+  margin: 0 ${token('space-s')};
 `
 
 const DropdownSectionWrapper = styled.div`

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -57,15 +57,19 @@ const TriggerButton = styled(
   SelectorButton as React.ForwardRefExoticComponent<TriggerButtonProps>
 ).attrs(triggerButtonAttrs)`
   flex: 1;
+
   justify-content: flex-start;
-  font-weight: ${conditional({
-    'font-weight-regular': whenProps({ outlined: false }),
-  })};
+
+  border: none;
+
   text-transform: ${conditional({
     capitalize: whenProps({ outlined: false, variant: 'tertiary' }),
     uppercase: whenProps({ outlined: true }),
   })};
-  border: none;
+
+  font-weight: ${conditional({
+    'font-weight-regular': whenProps({ outlined: false }),
+  })};
 
   ${hoverable`
       border-color: ${conditional({
@@ -113,17 +117,17 @@ const TriggerButton = styled(
           overflow: hidden;
 
           font-weight: ${token('font-weight-bold')};
-          pointer-events: none;
 
           visibility: hidden;
 
-          /* @REVIEW: since this is a span descendant of a button
-          I'm using the direct value of children the solution inside Link
+          /* @REVIEW: since this is a span descendant of a button 
+          I'm using the direct value of children the solution inside Link 
           relies on data-text attribute */
 
           content: '${children}';
           content: '${children}' / '';
           user-select: none;
+          pointer-events: none;
 
           @media speech {
             display: none;
@@ -135,29 +139,33 @@ const TriggerButton = styled(
 `
 
 const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
+  ${transition()}
+
+  ${font({
+    height: 'font-height-3',
+    weight: 'font-weight-medium',
+  })}
+
   display: flex;
-  flex: 1;
-  align-items: center;
   justify-content: flex-start;
+  align-items: center;
 
-  height: 36px;
-  font-size: ${token('font-size-4')};
-
-  color: ${token('color-neutral-darker')};
+  border-radius: ${token('button-border-radius')};
+  border-width: ${token('button-border-width')};
+  border-style: solid;
   border-color: ${conditional({
     'button-secondary-border-color': whenProps({ scheme: 'light', $outlined: true }),
     'button-secondary-dark-border-color': whenProps({ scheme: 'dark', $outlined: true }),
     'color-transparent': whenProps({ $outlined: false }),
   })};
-  border-style: solid;
-  border-width: ${token('button-border-width')};
-  border-radius: ${token('button-border-radius')};
 
-  ${transition()}
-  ${font({
-    height: 'font-height-3',
-    weight: 'font-weight-medium',
-  })}
+  font-size: ${token('font-size-4')};
+
+  color: ${token('color-neutral-darker')};
+
+  height: 36px;
+  flex: 1;
+
   ${hoverable`
     border-color: ${conditional({
       'button-secondary-border-color--hover': whenProps({ scheme: 'light', $outlined: true }),
@@ -205,11 +213,13 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
 `
 
 const TriggerHandle = styled(BaseButton)`
-  height: calc(100% - 2px);
+  ${focusable()}
+
   background: ${token('color-transparent')};
-  border: none;
   border-radius: 0 ${token('border-radius-s')} ${token('border-radius-s')} 0;
-  ${focusable()}
+  border: none;
+
+  height: calc(100% - 2px);
 `
 
 const RotatableIcon = styled(DefaultIcon)<{ $rotate: boolean }>`

package/src/components/HighlightMatch/HighlightMatch.tsx

@@ -15,9 +15,8 @@ const HighlightMatchWrapper = styled.span`
   white-space: pre;
 
   mark {
-    font-weight: ${token('font-weight-bold')};
-
     color: inherit;
+    font-weight: ${token('font-weight-bold')};
 
     background-color: ${token('color-transparent')};
   }

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.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.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/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/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.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.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`