@loadsmart/loadsmart-ui 5.11.0 → 5.11.2-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.11.0",
+  "version": "5.11.2-beta.1",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -78,7 +78,7 @@
     "@babel/preset-typescript": "7.13.0",
     "@commitlint/cli": "16.0.2",
     "@commitlint/config-conventional": "16.0.0",
-    "@loadsmart/stylelint-config": "^1.2.1-beta.1",
+    "@loadsmart/stylelint-config": "0.0.3",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "19.0.0",
     "@rollup/plugin-json": "4.1.0",
@@ -158,7 +158,12 @@
     "rollup-plugin-visualizer": "^5.5.2",
     "semantic-release": "17.4.2",
     "styled-components": "5.3.0",
-    "stylelint": "^13.13.1",
+    "stylelint": "13.13.1",
+    "stylelint-config-prettier": "8.0.2",
+    "stylelint-config-rational-order": "0.1.2",
+    "stylelint-config-recommended": "5.0.0",
+    "stylelint-no-unsupported-browser-features": "5.0.1",
+    "stylelint-order": "4.1.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-jest": "26.5.6",
     "ts-toolbelt": "^9.6.0",
@@ -186,10 +191,6 @@
     "lodash.omit": "4.5.0",
     "lodash.range": "3.2.0"
   },
-  "browserslist": [
-    "last 1 chrome version",
-    "last 1 firefox version"
-  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/loadsmart/miranda.git"

package/src/common/CloseButton/CloseButton.tsx

@@ -14,6 +14,17 @@ export interface CloseButtonProps extends ButtonProps {
 }
 
 const Button = styled(BaseButton)`
+  border: none;
+  border-radius: ${token('border-radius-circle')};
+
+  color: ${token('color-neutral-darker')};
+
+  background: ${token('color-transparent')};
+
+  padding: ${token('space-xs')};
+
+  font-size: ${token('font-size-3')};
+
   /*
    * button height is set in the BaseButton component
    * we set width here to ensure a perfectly rounded button
@@ -23,13 +34,6 @@ const Button = styled(BaseButton)`
     'button-small-height': whenProps({ scale: 'small' }),
     'button-large-height': whenProps({ scale: 'large' }),
   })};
-  padding: ${token('space-xs')};
-  font-size: ${token('font-size-3')};
-  color: ${token('color-neutral-darker')};
-  background: ${token('color-transparent')};
-
-  border: none;
-  border-radius: ${token('border-radius-circle')};
 
   ${focusable`
     box-shadow: ${token('button-icon-outline')};

package/src/common/SelectionWrapper.tsx

@@ -54,11 +54,18 @@ const Children = styled.span`
 const StyledLabel = styled.label<SelectionStyleProps>`
   box-sizing: border-box;
 
+  ${transition()}
+  ${font({
+    weight: 'checkbox-font-weight',
+  })}
+
   display: inline-flex;
   flex-flow: row nowrap;
   align-items: center;
   justify-content: flex-start;
 
+  cursor: pointer;
+
   font-size: ${conditional({
     'checkbox-font-size': whenProps({ scale: 'default' }),
     'checkbox-small-font-size': whenProps({ scale: 'small' }),
@@ -69,13 +76,6 @@ const StyledLabel = styled.label<SelectionStyleProps>`
     'checkbox-dark-color': whenProps({ scheme: 'dark' }),
   })};
 
-  cursor: pointer;
-
-  ${transition()}
-  ${font({
-    weight: 'checkbox-font-weight',
-  })}
-
   ${Children} {
     margin: 0 ${token('space-xs')};
   }

package/src/components/Accordion/Accordion.tsx

@@ -31,64 +31,70 @@ const StyledWrapper = styled.article<{ open: boolean }>`
 `
 
 const StyledToggle = styled.button<{ open: boolean }>`
+  ${font({
+    height: 'font-height-2',
+  })}
+
+  ${transition()}
+
   display: flex;
   flex-direction: row;
-  align-items: center;
   justify-content: flex-start;
-
-  width: 100%;
-  padding: ${token('space-s')} ${token('space-m')};
+  align-items: center;
 
   font-size: ${token('font-size-3')};
   font-weight: ${conditional({
     'font-weight-regular': whenProps({ open: false }),
     'font-weight-bold': whenProps({ open: true }),
   })};
-
-  color: ${token('color-neutral-darker')};
   text-align: left;
+
   cursor: pointer;
+
+  color: ${token('color-neutral-darker')};
+
   background-color: ${token('color-transparent')};
-  border: none;
   border-radius: ${token('border-radius-s')};
+  border: none;
+
+  padding: ${token('space-s')} ${token('space-m')};
+
+  width: 100%;
 
-  ${font({
-    height: 'font-height-2',
-  })}
-  ${transition()}
   ${hoverable`
     background: ${token('color-neutral-lighter')};
   `}
+
   ${focusable`
     box-shadow: ${token('shadow-glow-primary')};
   `}
 `
 
 const StyledContent = styled.section<{ open: boolean }>`
-  padding-top: ${conditional({
+  ${font({
+    height: 'font-height-2',
+    weight: 'font-weight-medium',
+  })}
+
+  padding-left: ${conditional({
     '0': whenProps({ open: false }),
-    'space-xl': whenProps({ open: true }),
+    'space-m': whenProps({ open: true }),
   })};
   padding-right: ${conditional({
     '0': whenProps({ open: false }),
     'space-m': whenProps({ open: true }),
   })};
-  padding-bottom: ${conditional({
+  padding-top: ${conditional({
     '0': whenProps({ open: false }),
-    'space-s': whenProps({ open: true }),
+    'space-xl': whenProps({ open: true }),
   })};
-  padding-left: ${conditional({
+  padding-bottom: ${conditional({
     '0': whenProps({ open: false }),
-    'space-m': whenProps({ open: true }),
+    'space-s': whenProps({ open: true }),
   })};
 
   overflow-x: hidden;
   overflow-y: auto;
-
-  ${font({
-    height: 'font-height-2',
-    weight: 'font-weight-medium',
-  })}
 `
 
 const HiddenInput = styled.input`

package/src/components/Banner/Banner.tsx

@@ -32,15 +32,15 @@ interface VariantProps {
 }
 
 const Description = styled.div`
+  color: ${token('banner-description-color')};
   font-size: ${token('banner-font-size')};
   line-height: ${token('banner-font-height')};
-  color: ${token('banner-description-color')};
   text-align: left;
 `
 
 const Title = styled.div<VariantProps>`
-  font-size: ${token('banner-font-size')};
   font-weight: ${token('banner-title-font-weight')};
+  font-size: ${token('banner-font-size')};
   line-height: ${token('banner-font-height')};
   text-align: left;
 `

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -31,11 +31,12 @@ const StyledLi = styled.li<BreadcrumbProps>`
   display: inline-flex;
   align-items: center;
 
-  font-size: ${token('breadcrumbs-font-size')};
   font-weight: ${conditional({
     'breadcrumbs-font-weight': whenProps({ active: false }),
     'breadcrumbs-font-weight--active': whenProps({ active: true }),
   })};
+
+  font-size: ${token('breadcrumbs-font-size')};
   line-height: ${token('breadcrumbs-font-height')};
 
   & + & {
@@ -45,9 +46,9 @@ const StyledLi = styled.li<BreadcrumbProps>`
   &:not(:only-child):not(:last-child)::after {
     position: absolute;
     left: calc(100% + 14px);
-    font-size: ${token('breadcrumbs-font-size')};
 
     font-weight: ${token('font-weight-bold')};
+    font-size: ${token('breadcrumbs-font-size')};
 
     line-height: ${token('breadcrumbs-font-height')};
 

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -20,9 +20,9 @@ const StyledWrapper = styled.nav`
 const StyledOl = styled.ol`
   display: flex;
   flex-direction: row;
+  margin: 0;
 
   padding: 0;
-  margin: 0;
 
   list-style: none;
 `

package/src/components/Button/Button.tsx

@@ -68,6 +68,16 @@ const BaseStyledButton = styled.button<{
   $scale: ButtonProps['scale']
   $loading?: ButtonProps['loading']
 }>`
+  ${transition()}
+
+  ${typography(
+    conditional({
+      'button-md': whenProps({ $scale: 'default' }),
+      'button-sm': whenProps({ $scale: 'small' }),
+      'button-lg': whenProps({ $scale: 'large' }),
+    })
+  )}
+
   box-sizing: border-box;
 
   display: inline-flex;
@@ -75,6 +85,16 @@ const BaseStyledButton = styled.button<{
   align-items: center;
   justify-content: center;
 
+  text-transform: uppercase;
+  text-align: center;
+
+  cursor: pointer;
+
+  border-radius: ${token('border-radius-s')};
+  border-width: ${token('border-width-thin')};
+  border-style: solid;
+  border-color: ${token('color-neutral-darker')};
+
   height: ${conditional({
     'button-height': whenProps({ $scale: 'default' }),
     'button-small-height': whenProps({ $scale: 'small' }),
@@ -82,25 +102,8 @@ const BaseStyledButton = styled.button<{
   })};
 
   padding: 0 8px;
-  text-align: center;
-  text-transform: uppercase;
-
-  cursor: pointer;
-
-  border-color: ${token('color-neutral-darker')};
-  border-style: solid;
-  border-width: ${token('border-width-thin')};
-  border-radius: ${token('border-radius-s')};
 
   ${disableable()}
-  ${transition()}
-  ${typography(
-    conditional({
-      'button-md': whenProps({ $scale: 'default' }),
-      'button-sm': whenProps({ $scale: 'small' }),
-      'button-lg': whenProps({ $scale: 'large' }),
-    })
-  )}
 
   ${({ $loading }) => $loading && 'pointer-events: none;'}
 

package/src/components/Calendar/Calendar.tsx

@@ -23,19 +23,23 @@ const Container = styled(Stack)`
 `
 
 const BorderlessButton = styled(BaseButton)`
+  ${typography('body-bold')}
+  border-color: transparent;
+  background-color: transparent;
+
   color: ${token('color-neutral')};
+
+  inline-size: 40px;
+
   visibility: ${conditional({
     visible: whenProps({ 'aria-hidden': false }),
     hidden: whenProps({ 'aria-hidden': true }),
   })};
-  background-color: transparent;
-  border-color: transparent;
-  inline-size: 40px;
 
-  ${typography('body-bold')}
   ${hoverable`
     color: ${token('color-neutral-dark')};
   `}
+
   ${focusable`
     box-shadow: ${token('button-primary-outline')};
   `}

package/src/components/Calendar/PickerModeToggle.tsx

@@ -12,10 +12,7 @@ import typography from 'styles/typography'
 import type { ButtonProps } from 'components/Button'
 
 const Button = styled(BaseButton)`
-  color: ${token('color-neutral-dark')};
   user-select: none;
-  background-color: transparent;
-  border-color: transparent;
 
   ${typography(
     conditional({
@@ -23,9 +20,15 @@ const Button = styled(BaseButton)`
       body: whenProps({ 'aria-expanded': false }),
     })
   )};
+  border-color: transparent;
+  background-color: transparent;
+
+  color: ${token('color-neutral-dark')};
+
   ${focusable`
     box-shadow: ${token('button-primary-outline')};
   `}
+
   ${disableable`
     pointer-events: none;
     opacity: 1;

package/src/components/Calendar/Pickers/DayPicker.tsx

@@ -53,9 +53,9 @@ const Text = styled(DefaultText)`
 
 const Grid = styled.div`
   display: grid;
+  grid-gap: ${token('space-2xs')};
   grid-template-rows: 1.25rem repeat(auto-fill, 2.5rem);
   grid-template-columns: repeat(7, 2.5rem);
-  grid-gap: ${token('space-2xs')};
 `
 
 /**

package/src/components/Calendar/Pickers/MonthPicker.tsx

@@ -10,9 +10,9 @@ import type { CalendarMonth, CalendarMonthAlias } from '../Month.helper'
 
 const Container = styled.div`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
   grid-auto-rows: 3.75rem;
   grid-gap: ${token('space-2xs')};
+  grid-template-columns: repeat(3, 1fr);
 `
 
 function getStatus(calendar: useCalendarReturn, month: CalendarMonth) {

package/src/components/Calendar/Pickers/PickerButton.tsx

@@ -19,8 +19,20 @@ const PickerButton = styled(BaseButton)<{
     | 'selection'
     | 'next-month-day'
 }>`
+  ${typography(
+    conditional({
+      body: whenProps({ $status: ['default', 'faded'] }),
+      'body-bold': whenProps({
+        $status: ['current-day', 'selection-start', 'selection', 'selection-end'],
+      }),
+    })
+  )}
+
+  user-select: none;
+
   height: 100%;
-  padding: ${token('space-xs')} ${token('space-s')};
+
+  border-radius: 0;
 
   color: ${conditional({
     'color-neutral-lighter': whenProps({
@@ -30,45 +42,30 @@ const PickerButton = styled(BaseButton)<{
     'color-neutral-dark': whenProps({ $status: 'next-month-day' }),
     'color-accent': whenProps({ $status: 'current-day' }),
   })};
-  visibility: ${conditional({
-    visible: whenProps({ 'aria-hidden': false }),
-    hidden: whenProps({ 'aria-hidden': true }),
-  })};
-  user-select: none;
+
   background: ${conditional({
     'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
     'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
     'color-neutral': whenProps({ $status: 'selection' }),
     'color-neutral-lightest': whenProps({ $status: 'current-day' }),
   })};
+
   border-color: ${conditional({
     'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
     'color-neutral-darker': whenProps({ $status: ['selection-start', 'selection-end'] }),
     'color-neutral': whenProps({ $status: 'selection' }),
     'color-neutral-light': whenProps({ $status: 'current-day' }),
   })};
-  border-radius: 0;
 
   ${conditional({
     'opacity: 0.4;': whenProps({ $status: 'faded' }),
     'opacity: 1;': whenProps({ $status: (status) => status !== 'faded' }),
   })}
-  ${typography(
-    conditional({
-      body: whenProps({ $status: ['default', 'faded'] }),
-      'body-bold': whenProps({
-        $status: ['current-day', 'selection-start', 'selection', 'selection-end'],
-      }),
-    })
-  )}
+
+  padding: ${token('space-xs')} ${token('space-s')};
+
   ${hoverable`
-    font-weight: ${token('font-weight-bold')};
-    color: ${conditional({
-      'color-neutral-dark': whenProps({ $status: ['default', 'faded'] }),
-      'color-neutral-lightest': whenProps({
-        $status: ['selection-start', 'selection', 'selection-end'],
-      }),
-    })};
+    border-color: ${token('color-neutral')};
     background-color: ${conditional({
       'color-transparent': whenProps({ $status: ['default', 'faded', 'next-month-day'] }),
       'color-neutral-dark': whenProps({
@@ -76,7 +73,14 @@ const PickerButton = styled(BaseButton)<{
       }),
       'color-neutral-lightest': whenProps({ $status: 'current-day' }),
     })};
-    border-color: ${token('color-neutral')};
+    color: ${conditional({
+      'color-neutral-dark': whenProps({ $status: ['default', 'faded'] }),
+      'color-neutral-lightest': whenProps({
+        $status: ['selection-start', 'selection', 'selection-end'],
+      }),
+    })};
+
+    font-weight: ${token('font-weight-bold')};
   `}
 
   ${focusable`
@@ -85,25 +89,31 @@ const PickerButton = styled(BaseButton)<{
   `}
 
   ${activatable`
-    color: ${conditional({
-      'color-neutral': whenProps({ 'aria-checked': false }),
-      'color-neutral-white': whenProps({ 'aria-checked': true }),
-    })};
+    border-color: ${token('color-neutral')};
     background-color: ${conditional({
       'color-transparent': whenProps({ 'aria-checked': false }),
       'color-neutral': whenProps({ 'aria-checked': true }),
     })};
-    border-color: ${token('color-neutral')};
+    color: ${conditional({
+      'color-neutral': whenProps({ 'aria-checked': false }),
+      'color-neutral-white': whenProps({ 'aria-checked': true }),
+    })};
   `}
 
   ${disableable`
-    color: ${token('color-neutral-darker')};
     background-color: ${token('color-transparent')};
     border-color: ${conditional({
       'color-neutral-darkest': whenProps({ 'aria-checked': true }),
       'color-transparent': whenProps({ 'aria-checked': false }),
     })};
+
+    color: ${token('color-neutral-darker')};
   `}
+
+  visibility: ${conditional({
+    visible: whenProps({ 'aria-hidden': false }),
+    hidden: whenProps({ 'aria-hidden': true }),
+  })};
 `
 
 export default styled(PickerButton)({})

package/src/components/Calendar/Pickers/YearPicker.tsx

@@ -9,9 +9,9 @@ import type { useCalendarReturn, CalendarPickerProps } from '../Calendar.types'
 
 const Container = styled.div`
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
   grid-auto-rows: 2.875rem;
   grid-gap: ${token('space-2xs')};
+  grid-template-columns: repeat(4, 1fr);
 `
 
 const PickerButton = styled(DefaultPickerButton)`

package/src/components/Card/Card.tsx

@@ -15,10 +15,10 @@ export interface CardProps extends HTMLAttributes<HTMLElement> {
 
 const CardSubtitle = styled.div`
   padding: 0 ${token('card-padding-x')} ${token('card-padding-y')};
-  font-size: ${token('card-subtitle-font-size')};
-  font-weight: ${token('card-subtitle-font-weight')};
 
   color: ${token('card-color')};
+  font-weight: ${token('card-subtitle-font-weight')};
+  font-size: ${token('card-subtitle-font-size')};
 `
 
 const CardSeparator = styled.hr`
@@ -35,13 +35,12 @@ const CardBody = styled.div`
 `
 
 const Wrapper = styled.div`
+  ${font({})}
+
   display: flex;
   flex-direction: row;
+
   color: ${token('card-color')};
-  background: ${token('card-background')};
-  border: 1px solid ${token('card-border-color')};
-  border-radius: ${token('card-border-radius')};
-  ${font({})}
 
   ${CardTitleWrapper} + ${CardSubtitle} {
     margin-top: ${token('space-xs')};
@@ -50,6 +49,10 @@ const Wrapper = styled.div`
   ${CardTitleWrapper} + ${CardSeparator} {
     margin-top: ${token('card-padding-y')};
   }
+
+  border: 1px solid ${token('card-border-color')};
+  border-radius: ${token('card-border-radius')};
+  background: ${token('card-background')};
 `
 
 const Container = styled.div<{ flagged: boolean }>`

package/src/components/Card/CardTitle.tsx

@@ -21,13 +21,12 @@ const Leading = styled(StyledSpan)`
 `
 
 const Wrapper = styled.div`
-
   padding: ${token('card-padding-y')} ${token('card-padding-x')} 0;
-  font-size: ${token('card-title-font-size')};
-  font-weight: ${token('card-title-font-weight')};
-  line-height: ${token('card-title-font-height')};
 
   color: ${token('card-color')};
+  font-weight: ${token('card-title-font-weight')};
+  font-size: ${token('card-title-font-size')};
+  line-height: ${token('card-title-font-height')};
 `
 
 function CardTitle({ children, leading, ...others }: CardTitleProps): JSX.Element {

package/src/components/Checkbox/Checkbox.tsx

@@ -21,32 +21,45 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Se
 const Check = styled(Icon)<SelectionStyleProps>`
   position: absolute;
   top: 50%;
+
   left: 50%;
-  pointer-events: none;
+
   transform: translate(-50%, -50%);
+
+  pointer-events: none;
 `
 
 const Selector = styled.input<SelectionStyleProps>`
+  ${transition()}
+
   display: inline-flex;
   flex-flow: row nowrap;
   align-items: center;
-  width: ${token('checkbox-selector-size')};
-  height: ${token('checkbox-selector-size')};
-  color: white;
+
   cursor: pointer;
-  background: ${conditional({
-    'checkbox-selector-background': whenProps({ scheme: 'light' }),
-    'checkbox-dark-selector-background': whenProps({ scheme: 'dark' }),
-  })};
+
+  appearance: none;
+
+  outline: none;
+
+  color: white;
+
+  height: ${token('checkbox-selector-size')};
+  width: ${token('checkbox-selector-size')};
+
+  border-radius: ${token('checkbox-selector-border-radius')};
+  border-width: ${token('button-border-width')};
+  border-style: solid;
+
   border-color: ${conditional({
     'checkbox-selector-border-color': whenProps({ scheme: 'light' }),
     'checkbox-dark-selector-border-color': whenProps({ scheme: 'dark' }),
   })};
-  border-style: solid;
-  border-width: ${token('button-border-width')};
-  border-radius: ${token('checkbox-selector-border-radius')};
-  appearance: none;
-  outline: none;
+
+  background: ${conditional({
+    'checkbox-selector-background': whenProps({ scheme: 'light' }),
+    'checkbox-dark-selector-background': whenProps({ scheme: 'dark' }),
+  })};
 
   :checked {
     background-color: ${token('checkbox-selector-checked-background')};
@@ -116,7 +129,6 @@ const Selector = styled.input<SelectionStyleProps>`
 
     box-shadow: ${token('checkbox-selector-outline')};
   `}
-  ${transition()}
 `
 
 function Checkbox({