@loadsmart/loadsmart-ui 5.9.0 → 5.10.1

package/dist/theming/index.d.ts

@@ -1,5 +1,5 @@
-import { ThemeProps } from 'styled-components';
-import ThemeAlice from './themes/alice.theme';
+import type { ThemeProps } from 'styled-components';
+import type ThemeAlice from './themes/alice.theme';
 export declare type ThemeToken = keyof typeof ThemeAlice;
 export declare type ThemeTokenValue = string | number;
 export declare type CustomTheme = Record<ThemeToken, ThemeTokenValue>;

package/dist/theming/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/theming/index.ts"],"sourcesContent":["import { ThemeProps } from 'styled-components'\nimport { isFunction } from '@loadsmart/utils-function'\nimport ThemeAlice from './themes/alice.theme'\n\nexport type ThemeToken = keyof typeof ThemeAlice\nexport type ThemeTokenValue = string | number\n\nexport type CustomTheme = Record<ThemeToken, ThemeTokenValue>\nexport type ThemedProps = ThemeProps<CustomTheme>\n\ntype TokenLike<P extends ThemedProps = ThemedProps> = ThemeToken | ((props: P) => ThemeToken)\n\nfunction getTokenFromTheme<P extends ThemedProps>(token: TokenLike<P>, props: P): ThemeTokenValue {\n  const tokenName = isFunction(token) ? token(props) : token\n  return props.theme[tokenName]\n}\n\n/**\n * Return a design token value for the current theme.\n * @param {string} token - Token whose value should be returned.\n * @param {[ThemedStyledProps]} props - Component props.\n * @returns {ThemeTokenValue} Token value or `undefined` if the token was not found for the current theme.\n */\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>\n): (props: TProps) => ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>,\n  props: TProps\n): ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(token: any, props?: any): any {\n  if (props === undefined) {\n    return (props: TProps) => getTokenFromTheme(token, props)\n  }\n\n  return getTokenFromTheme(token, props)\n}\n\nexport * as Themes from './themes'\n"],"names":["getTokenFromTheme","token","props","tokenName","isFunction","theme","undefined"],"mappings":"0LAYA,SAASA,EAAyCC,EAAqBC,GACrE,MAAMC,EAAYC,aAAWH,GAASA,EAAMC,GAASD,EACrD,OAAOC,EAAMG,MAAMF,8CAkBgCF,EAAYC,GAC/D,YAAcI,IAAVJ,EACMA,GAAkBF,EAAkBC,EAAOC,GAG9CF,EAAkBC,EAAOC"}
+{"version":3,"file":"index.js","sources":["../../src/theming/index.ts"],"sourcesContent":["import { isFunction } from '@loadsmart/utils-function'\n\nimport type { ThemeProps } from 'styled-components'\nimport type ThemeAlice from './themes/alice.theme'\n\nexport type ThemeToken = keyof typeof ThemeAlice\nexport type ThemeTokenValue = string | number\n\nexport type CustomTheme = Record<ThemeToken, ThemeTokenValue>\nexport type ThemedProps = ThemeProps<CustomTheme>\n\ntype TokenLike<P extends ThemedProps = ThemedProps> = ThemeToken | ((props: P) => ThemeToken)\n\nfunction getTokenFromTheme<P extends ThemedProps>(token: TokenLike<P>, props: P): ThemeTokenValue {\n  const tokenName = isFunction(token) ? token(props) : token\n  return props.theme[tokenName]\n}\n\n/**\n * Return a design token value for the current theme.\n * @param {string} token - Token whose value should be returned.\n * @param {[ThemedStyledProps]} props - Component props.\n * @returns {ThemeTokenValue} Token value or `undefined` if the token was not found for the current theme.\n */\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>\n): (props: TProps) => ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(\n  token: TokenLike<TProps>,\n  props: TProps\n): ThemeTokenValue\n\nexport function getToken<TProps extends ThemedProps>(token: any, props?: any): any {\n  if (props === undefined) {\n    return (props: TProps) => getTokenFromTheme(token, props)\n  }\n\n  return getTokenFromTheme(token, props)\n}\n\nexport * as Themes from './themes'\n"],"names":["getTokenFromTheme","token","props","tokenName","isFunction","theme","undefined"],"mappings":"0LAaA,SAASA,EAAyCC,EAAqBC,GACrE,MAAMC,EAAYC,aAAWH,GAASA,EAAMC,GAASD,EACrD,OAAOC,EAAMG,MAAMF,8CAkBgCF,EAAYC,GAC/D,YAAcI,IAAVJ,EACMA,GAAkBF,EAAkBC,EAAOC,GAG9CF,EAAkBC,EAAOC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.9.0",
+  "version": "5.10.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": "0.0.3",
+    "@loadsmart/stylelint-config": "^1.2.1-beta.1",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "19.0.0",
     "@rollup/plugin-json": "4.1.0",
@@ -158,12 +158,7 @@
     "rollup-plugin-visualizer": "^5.5.2",
     "semantic-release": "17.4.2",
     "styled-components": "5.3.0",
-    "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",
+    "stylelint": "^13.13.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-jest": "26.5.6",
     "ts-toolbelt": "^9.6.0",
@@ -175,8 +170,8 @@
     "@testing-library/dom": ">=5.12.0",
     "@testing-library/react": ">=11.2.6",
     "prop-types": ">=15.7.2",
-    "react": ">=17.0.2",
-    "react-dom": ">=17.0.2",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
     "styled-components": ">=5.3.0"
   },
   "dependencies": {
@@ -191,6 +186,10 @@
     "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,17 +14,6 @@ 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
@@ -34,6 +23,13 @@ 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

@@ -2,7 +2,7 @@ import React, { LabelHTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 import styled from 'styled-components'
 
-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 font from 'styles/font'
@@ -54,18 +54,11 @@ 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' }),
@@ -76,6 +69,13 @@ 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.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import Accordion from './Accordion'
 import type { AccordionProps } from './Accordion'
 

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,5 @@
-import React, { Fragment, HTMLAttributes, PropsWithChildren, ReactNode } from 'react'
+import React, { Fragment } from 'react'
+import type { PropsWithChildren, HTMLAttributes, ReactNode } from 'react'
 import clsx from 'clsx'
 import styled from 'styled-components'
 import { identity, isFunction } from '@loadsmart/utils-function'
@@ -30,70 +31,64 @@ const StyledWrapper = styled.article<{ open: boolean }>`
 `
 
 const StyledToggle = styled.button<{ open: boolean }>`
-  ${font({
-    height: 'font-height-2',
-  })}
-
-  ${transition()}
-
   display: flex;
   flex-direction: row;
-  justify-content: flex-start;
   align-items: center;
+  justify-content: flex-start;
+
+  width: 100%;
+  padding: ${token('space-s')} ${token('space-m')};
 
   font-size: ${token('font-size-3')};
   font-weight: ${conditional({
     'font-weight-regular': whenProps({ open: false }),
     'font-weight-bold': whenProps({ open: true }),
   })};
-  text-align: left;
-
-  cursor: pointer;
 
   color: ${token('color-neutral-darker')};
-
+  text-align: left;
+  cursor: pointer;
   background-color: ${token('color-transparent')};
-  border-radius: ${token('border-radius-s')};
   border: none;
+  border-radius: ${token('border-radius-s')};
 
-  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 }>`
-  ${font({
-    height: 'font-height-2',
-    weight: 'font-weight-medium',
-  })}
-
-  padding-left: ${conditional({
+  padding-top: ${conditional({
     '0': whenProps({ open: false }),
-    'space-m': whenProps({ open: true }),
+    'space-xl': whenProps({ open: true }),
   })};
   padding-right: ${conditional({
     '0': whenProps({ open: false }),
     'space-m': whenProps({ open: true }),
   })};
-  padding-top: ${conditional({
-    '0': whenProps({ open: false }),
-    'space-xl': whenProps({ open: true }),
-  })};
   padding-bottom: ${conditional({
     '0': whenProps({ open: false }),
     'space-s': whenProps({ open: true }),
   })};
+  padding-left: ${conditional({
+    '0': whenProps({ open: false }),
+    'space-m': 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.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 Banner, { BannerLarge, BannerAction, BannerActionLarge } from './Banner'
 import type { BannerProps, BannerActionProps } from './Banner'
 import { Icon } from 'components/Icon'

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-weight: ${token('banner-title-font-weight')};
   font-size: ${token('banner-font-size')};
+  font-weight: ${token('banner-title-font-weight')};
   line-height: ${token('banner-font-height')};
   text-align: left;
 `

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -31,12 +31,11 @@ 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')};
 
   & + & {
@@ -46,9 +45,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')};
 
@@ -68,7 +67,7 @@ function getWrappedLabel(props: Partial<BreadcrumbProps>) {
       href={url}
       target="_self"
       onClick={onClick}
-      {...(active && {'aria-current': 'page'})}
+      {...(active && { 'aria-current': 'page' })}
       {...rest}
     >
       {label}

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Breadcrumbs, { BreadcrumbsProps } from './Breadcrumbs'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { Story, Meta } from '@storybook/react/types-6-0'
 
 export default {
   title: 'Components/Breadcrumbs',

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

@@ -1,13 +1,18 @@
 import React from 'react'
-import { Meta } from '@storybook/react/types-6-0'
+import type { Meta } from '@storybook/react/types-6-0'
 import BackButton from '../../common/BackButton'
 import Button, { SelectorButton, IconButton, Caret, BaseButton } from './Button'
 import CloseButton from '../../common/CloseButton'
+import type { ReactNode } from 'react'
 
 import type { BackButtonProps } from '../../common/BackButton'
 import type { ButtonProps } from './Button'
 import type { CloseButtonProps } from '../../common/CloseButton'
 
+const Container = ({ children }: { children?: ReactNode }) => {
+  return <div className="flex flex-col space-y-2 items-center">{children}</div>
+}
+
 export default {
   title: 'Components/Button',
   component: Button,
@@ -34,6 +39,11 @@ export default {
         type: 'boolean',
       },
     },
+    loading: {
+      control: {
+        type: 'boolean',
+      },
+    },
     className: {
       table: {
         disable: true,
@@ -78,9 +88,9 @@ export default {
 
 export function Playground(args: ButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col space-y-2">
+    <Container>
       <Button {...args}>Button</Button>
-    </div>
+    </Container>
   )
 }
 
@@ -93,7 +103,7 @@ Playground.args = {
 
 export function Base(args: ButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col space-y-2">
+    <Container>
       <BaseButton {...args}>Click me</BaseButton>
       <BaseButton {...args} leading={<span>&clubs;</span>}>
         Click me
@@ -104,17 +114,17 @@ export function Base(args: ButtonProps): JSX.Element {
       <BaseButton {...args} leading={<span>&clubs;</span>} trailing={<span>&spades;</span>}>
         Click me
       </BaseButton>
-    </div>
+    </Container>
   )
 }
 
 export function Selector(args: ButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col space-y-2">
+    <Container>
       <SelectorButton {...args} trailing={<Caret />}>
         Button
       </SelectorButton>
-    </div>
+    </Container>
   )
 }
 
@@ -125,11 +135,11 @@ Selector.args = {
 
 export function Icon(args: ButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col items-center">
+    <Container>
       <IconButton {...args} variant="icon">
         <span>&clubs;</span>
       </IconButton>
-    </div>
+    </Container>
   )
 }
 
@@ -139,16 +149,26 @@ Icon.args = {
 
 export function Back(args: BackButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col items-center">
+    <Container>
       <BackButton {...args} />
-    </div>
+    </Container>
   )
 }
 
 export function Close(args: CloseButtonProps): JSX.Element {
   return (
-    <div className="flex flex-col items-center">
+    <Container>
       <CloseButton {...args} />
-    </div>
+    </Container>
+  )
+}
+
+export function Loading(args: ButtonProps): JSX.Element {
+  return (
+    <Container>
+      <Button loading {...args}>
+        Accessible Text
+      </Button>
+    </Container>
   )
 }

package/src/components/Button/Button.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { screen } from '@testing-library/react'
 
 import generator from '../../../tests/generator'
 import renderer from '../../../tests/renderer'
@@ -13,8 +14,9 @@ describe('<Button />', () => {
       children: generator.word(),
     }
 
-    const { getByText } = setup(props)
-    getByText(props.children)
+    setup(props)
+
+    screen.getByRole('button', { name: props.children })
   })
 
   it('renders trailing correctly', () => {
@@ -23,9 +25,9 @@ describe('<Button />', () => {
       trailing: generator.word(),
     }
 
-    const { getByText } = setup(props)
-    getByText(props.children)
-    getByText(props.trailing)
+    setup(props)
+
+    screen.getByRole('button', { name: `${props.children} ${props.trailing}` })
   })
 
   it('renders leading correctly', () => {
@@ -34,8 +36,22 @@ describe('<Button />', () => {
       leading: generator.word(),
     }
 
-    const { getByText } = setup(props)
-    getByText(props.children)
-    getByText(props.leading)
+    setup(props)
+
+    screen.getByRole('button', { name: `${props.leading} ${props.children}` })
+  })
+
+  it('renders loading state', () => {
+    const props = {
+      children: generator.word(),
+      loading: true,
+    }
+
+    setup(props)
+
+    const button = screen.getByRole('button')
+
+    expect(button).toHaveAttribute('aria-disabled', 'true')
+    expect(button).toHaveAccessibleName(props.children)
   })
 })