@loadsmart/loadsmart-ui 5.13.2 → 5.14.1

package/dist/theming/theming.helpers.d.ts

@@ -18,4 +18,5 @@ export declare function generateBorderGetters({ radiuses, widths, }: {
     radiuses: VariableMap;
     widths: VariableMap;
 }): Record<string, (name: string) => VariableValue>;
+export declare function generateHeightGetter(heights: VariableMap): (name: string) => VariableValue;
 export {};

package/dist/tools/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-0f94ff83.js");require("../toArray-b56541b4.js"),require("../loadsmart.theme-63c13988.js"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../prop-73352de5.js");require("../toArray-b56541b4.js"),require("../miranda-compatibility.theme-bb0cbfb2.js"),require("@loadsmart/miranda-tokens"),require("../theming/index.js"),exports.conditional=e.conditional,exports.prop=e.prop,exports.whenProps=e.whenProps;
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loadsmart/loadsmart-ui",
-  "version": "5.13.2",
+  "version": "5.14.1",
   "description": "Miranda UI, a React UI library",
   "main": "dist",
   "files": [
@@ -78,6 +78,7 @@
     "@babel/preset-typescript": "7.13.0",
     "@commitlint/cli": "16.0.2",
     "@commitlint/config-conventional": "16.0.0",
+    "@loadsmart/miranda-tokens": "1.3.0",
     "@loadsmart/stylelint-config": "0.0.3",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "19.0.0",
@@ -167,16 +168,17 @@
     "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "ts-jest": "26.5.6",
     "ts-toolbelt": "^9.6.0",
-    "ttypescript": "1.5.12",
+    "ttypescript": "^1.5.13",
     "typescript": "4.2.4",
     "typescript-plugin-styled-components": "1.5.0"
   },
   "peerDependencies": {
+    "@loadsmart/miranda-tokens": "1.3.0",
     "@testing-library/dom": ">=5.12.0",
     "@testing-library/react": ">=11.2.6",
     "prop-types": ">=15.7.2",
-    "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
+    "react": ">=16.8.0",
     "styled-components": ">=5.3.0"
   },
   "dependencies": {

package/src/addons/Theme/register.js

@@ -18,8 +18,9 @@ import loadsmart, {
   SHADOWS,
   SPACINGS,
 } from '../../theming/themes/loadsmart.theme'
+import miranda from '../../theming/themes/miranda-compatibility.theme'
 
-const THEMES = { alice, loadsmart }
+const THEMES = { alice, loadsmart, miranda }
 
 const TOKEN_PARAM_KEY = 'tokenPrefix'
 

package/src/components/Dropdown/DropdownMenu.tsx

@@ -26,7 +26,7 @@ import conditional, { whenProps } from 'tools/conditional'
 
 const Popover = styled(DefaultPopover)<{ $align: 'start' | 'end' }>`
   position: absolute;
-  top: calc(36px + ${token('space-xs')});
+  top: calc(${token('dropdown-trigger-height')} + ${token('space-xs')});
 
   ${conditional({
     'left: 0;': whenProps({ $align: 'start' }),

package/src/components/Dropdown/DropdownTrigger.tsx

@@ -37,7 +37,7 @@ type TriggerButtonProps = ButtonProps & {
 
 const dropdownExpandedStyle = css`
   &[aria-expanded='true'] {
-    color: ${token('color-accent')};
+    color: ${token('dropdown-trigger-expanded-color')};
   }
 `
 
@@ -120,8 +120,8 @@ const TriggerButton = styled(
 
           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}';
@@ -163,7 +163,9 @@ const DropdownTriggerWrapper = styled.div<DropdownTriggerWrapperProps>`
 
   color: ${token('color-neutral-darker')};
 
-  height: 36px;
+  height: ${token('dropdown-trigger-height')};
+  box-sizing: border-box;
+
   flex: 1;
 
   ${hoverable`

package/src/components/Select/SelectOption.tsx

@@ -22,17 +22,14 @@ const Group = styled(DefaultGroup).attrs({
 `
 
 const Icon = styled(DefaultIcon)`
-  color: ${token('color-accent')};
+  color: ${token('select-selected-option-check-color')};
 `
 
 const DefaultSelectOption = styled(Dropdown.Item)<DropdownMenuItemProps>`
   background: ${conditional({
-      'color-accent': whenProps({ 'aria-selected': true }),
-      'color-neutral-white': whenProps({ 'aria-selected': false }),
-    })}${conditional({
-      '33': whenProps({ 'aria-selected': true }),
-      ff: whenProps({ 'aria-selected': false }),
-    })};
+    'select-selected-option-background-color': whenProps({ 'aria-selected': true }),
+    'color-neutral-white': whenProps({ 'aria-selected': false }),
+  })};
 `
 
 function SelectOption({

package/src/components/SideNavigation/Menu/Menu.tsx

@@ -15,9 +15,10 @@ const MenuTitle = styled.div`
   padding-left: ${token('space-l')};
 
   color: ${token('color-neutral')};
-  font-weight: ${token('font-weight-bold')};
-  font-size: ${token('font-size-5')};
-  line-height: ${token('font-height-3')};
+
+  font-weight: ${token('side-navigation-menu-title-font-weight')};
+  font-size: ${token('side-navigation-menu-title-font-size')};
+  line-height: ${token('side-navigation-menu-title-line-height')};
   text-transform: uppercase;
 `
 

package/src/components/SideNavigation/Menu/MenuBaseItem.tsx

@@ -35,7 +35,7 @@ const StyledMenuItem = styled.button`
   cursor: pointer;
 
   ${focusable`
-    color: ${token('color-primary')};
+    color: ${token('side-navigation-menu-item-color--focus')};
   `}
 `
 

package/src/components/SideNavigation/Menu/MenuLink.tsx

@@ -8,16 +8,15 @@ import MenuBaseItem from './MenuBaseItem'
 
 const StyledMenuItem = styled((props) => <MenuBaseItem as="a" {...props} />)`
   ${hoverable`
-    color: ${token('color-primary')};
+    color: ${token('side-navigation-menu-link-color--hover')};
   `}
 
   ${({ active }) =>
     active
       ? css`
-          color: ${token('color-primary')};
-
-          background-color: rgba(0, 0, 0, 0.2);
-          box-shadow: inset ${token('space-xs')} 0px ${token('color-primary')};
+          background-color: ${token('side-navigation-menu-link-background-color--active')};
+          box-shadow: inset ${token('space-xs')} 0
+            ${token('side-navigation-menu-link-box-shadow-color--active')};
         `
       : ''}
 `

package/src/components/SideNavigation/SideNavigation.stories.tsx

@@ -46,7 +46,7 @@ export function Playground(args: SideNavigationProps): JSX.Element {
         <SideNavigation.Menu.SubItem
           label="Trailing"
           trailing={
-            <Tag size="small" variant="accent">
+            <Tag size="small" variant="success">
               NEW
             </Tag>
           }

package/src/components/Steps/ProgressSteps/ProgressStep.tsx

@@ -31,8 +31,8 @@ const StepConnector = styled.span<{ complete: boolean }>`
   })};
 
   background: ${conditional({
-    'color-neutral': whenProps({ complete: false }),
-    'color-accent': whenProps({ complete: true }),
+    'steps-progress-step-background-color': whenProps({ complete: false }),
+    'steps-progress-step-background-color--complete': whenProps({ complete: true }),
   })};
 `
 
@@ -79,16 +79,18 @@ const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
   border-width: 2px;
   border-style: solid;
   border-color: ${conditional({
-    'color-accent': whenProps([
+    'steps-progress-step-background-color--complete': whenProps([
       { current: true, complete: [true, false] },
       { current: false, complete: true },
     ]),
-    'color-neutral': whenProps({ current: false, complete: false }),
+    'steps-progress-step-background-color': whenProps({ current: false, complete: false }),
   })};
   border-radius: ${token('border-radius-circle')};
 
   background: ${conditional({
-    'color-accent': whenProps([{ current: false, complete: true }]),
+    'steps-progress-step-background-color--complete': whenProps([
+      { current: false, complete: true },
+    ]),
     'color-neutral-white': whenProps([
       { current: true, complete: [true, false] },
       { current: false, complete: false },
@@ -96,9 +98,9 @@ const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
   })};
 
   color: ${conditional({
-    'color-neutral': whenProps({ current: false, complete: false }),
+    'steps-progress-step-background-color': whenProps({ current: false, complete: false }),
     'color-neutral-white': whenProps({ current: false, complete: true }),
-    'color-accent': whenProps({ current: true }),
+    'steps-progress-step-background-color--complete': whenProps({ current: true }),
   })};
 `
 

package/src/components/ToggleGroup/Toggle.tsx

@@ -14,82 +14,107 @@ import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
 import type { ToggleGroupOptionProps, ToggleGroupType } from './ToggleGroup.types'
 
 const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
-  background: ${conditional({
-    'color-transparent': whenProps({ 'aria-checked': false }),
-    'color-neutral-darkest': whenProps({ 'aria-checked': true }),
+  text-transform: ${token('toggle-text-transform')};
+
+  background-color: ${conditional({
+    'toggle-background-color': whenProps({ 'aria-checked': false }),
+    'toggle-checked-background-color': whenProps({ 'aria-checked': true }),
   })};
 
   border-color: ${conditional({
-    'color-neutral-darkest': whenProps([
-      { $type: 'multiple' },
-      { $type: 'single', 'aria-checked': true },
-    ]),
-    'color-transparent': whenProps({ $type: 'single', 'aria-checked': false }),
+    'toggle-single-border-color': whenProps({ $type: 'single', 'aria-checked': false }),
+    'toggle-single-checked-border-color': whenProps({ $type: 'single', 'aria-checked': true }),
+    'toggle-multiple-border-color': whenProps({ $type: 'multiple', 'aria-checked': false }),
+    'toggle-multiple-checked-border-color': whenProps({ $type: 'multiple', 'aria-checked': true }),
   })};
 
   color: ${conditional({
-    'color-neutral-darker': whenProps({ 'aria-checked': false }),
-    'color-neutral-white': whenProps({ 'aria-checked': true }),
+    'toggle-color': whenProps({ 'aria-checked': false }),
+    'toggle-checked-color': whenProps({ 'aria-checked': true }),
   })};
 
   padding: ${token('space-xs')} ${token('space-s')};
 
   ${hoverable`
     border-color: ${conditional({
-      'color-neutral-dark': whenProps({ $type: 'multiple' }),
-      'color-transparent': whenProps({ $type: 'single' }),
+      'toggle-multiple-border-color--hover': whenProps({ $type: 'multiple' }),
+      'toggle-single-border-color--hover': whenProps({ $type: 'single' }),
     })};
 
     background-color: ${conditional({
-      'color-transparent': whenProps({ 'aria-checked': false }),
-      'color-neutral-dark': whenProps({ 'aria-checked': true }),
+      'toggle-background-color--hover': whenProps({ 'aria-checked': false }),
+      'toggle-checked-background-color--hover': whenProps({ 'aria-checked': true }),
     })};
+
     color: ${conditional({
-      'color-neutral-dark': whenProps({ 'aria-checked': false }),
-      'color-neutral-white': whenProps({ 'aria-checked': true }),
+      'toggle-color--hover': whenProps({ 'aria-checked': false }),
+      'toggle-checked-color--hover': whenProps({ 'aria-checked': true }),
     })};
   `}
 
   ${focusable`
-    border-color: ${token('color-neutral-darker')};
+    border-color: ${conditional({
+      'toggle-multiple-border-color--focus': whenProps({ $type: 'multiple' }),
+      'toggle-single-border-color--focus': whenProps({ $type: 'single' }),
+    })};
+
     background-color: ${conditional({
-      'color-transparent': whenProps({ 'aria-checked': false }),
-      'color-neutral-darker': whenProps({ 'aria-checked': true }),
+      'toggle-background-color--focus': whenProps({ 'aria-checked': false }),
+      'toggle-checked-background-color--focus': whenProps({ 'aria-checked': true }),
     })};
+
     color: ${conditional({
-      'color-neutral-darker': whenProps({ 'aria-checked': false }),
-      'color-neutral-white': whenProps({ 'aria-checked': true }),
+      'toggle-color--focus': whenProps({ 'aria-checked': false }),
+      'toggle-checked-color--focus': whenProps({ 'aria-checked': true }),
     })};
 
     box-shadow: ${token('button-primary-outline')};
   `}
 
   ${activatable`
-    border-color: ${token('color-neutral')};
+    border-color:  ${conditional({
+      'toggle-multiple-border-color--active': whenProps({ $type: 'multiple' }),
+      'toggle-single-border-color--active': whenProps({ $type: 'single' }),
+    })};
+
     background-color: ${conditional({
-      'color-transparent': whenProps({ 'aria-checked': false }),
-      'color-neutral': whenProps({ 'aria-checked': true }),
+      'toggle-background-color--active': whenProps({ 'aria-checked': false }),
+      'toggle-checked-background-color--active': whenProps({ 'aria-checked': true }),
     })};
+
     color: ${conditional({
-      'color-neutral': whenProps({ 'aria-checked': false }),
-      'color-neutral-white': whenProps({ 'aria-checked': true }),
+      'toggle-color--active': whenProps({ 'aria-checked': false }),
+      'toggle-checked-color--active': whenProps({ 'aria-checked': true }),
     })};
   `}
 
   ${disableable`
     opacity: 1; // toggle group already applies opacity; we don't want to overlap it.
 
+    background-color: ${conditional({
+      'toggle-background-color--disabled': whenProps({ 'aria-checked': false }),
+      'toggle-checked-background-color--disabled': whenProps({ 'aria-checked': true }),
+    })};
+
     border-color: ${conditional({
-      'color-neutral-darkest': whenProps([
-        { $type: 'multiple' },
-        { $type: 'single', 'aria-checked': true },
-      ]),
-      'color-transparent': whenProps({ $type: 'single', 'aria-checked': false }),
+      'toggle-single-border-color--disabled': whenProps({ $type: 'single', 'aria-checked': false }),
+      'toggle-single-checked-border-color--disabled': whenProps({
+        $type: 'single',
+        'aria-checked': true,
+      }),
+      'toggle-multiple-border-color--disabled': whenProps({
+        $type: 'multiple',
+        'aria-checked': false,
+      }),
+      'toggle-multiple-checked-border-color--disabled': whenProps({
+        $type: 'multiple',
+        'aria-checked': true,
+      }),
     })};
 
     color: ${conditional({
-      'color-neutral-lightest': whenProps({ 'aria-checked': true }),
-      'color-neutral-darker': whenProps({ 'aria-checked': false }),
+      'toggle-color--disabled': whenProps({ 'aria-checked': false }),
+      'toggle-checked-color--disabled': whenProps({ 'aria-checked': true }),
     })};
   `}
 `

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -21,32 +21,45 @@ import type {
 
 const Container = styled(Group)<{ $multiple: boolean; $scale: ToggleGroupProps['scale'] }>`
   padding: ${conditional({
-    '0': whenProps({ $multiple: true }),
-    '3px': whenProps({ $multiple: false }),
+    'toggle-group-multiple-padding': whenProps({ $multiple: true }),
+    'toggle-group-single-padding': whenProps({ $multiple: false }),
   })};
 
-  ${({ $multiple }) =>
-    $multiple
-      ? css`
-          border: none;
-        `
-      : css`
-          border: 1px solid ${token('color-neutral-darker')};
-          border-radius: ${token('border-radius-s')};
-        `}
+  border-color: ${conditional({
+    'toggle-group-multiple-border-color': whenProps({ $multiple: true }),
+    'toggle-group-single-border-color': whenProps({ $multiple: false }),
+  })};
+
+  border-style: ${conditional({
+    'toggle-group-multiple-border-style': whenProps({ $multiple: true }),
+    'toggle-group-single-border-style': whenProps({ $multiple: false }),
+  })};
+
+  border-width: ${conditional({
+    'toggle-group-multiple-border-width': whenProps({ $multiple: true }),
+    'toggle-group-single-border-width': whenProps({ $multiple: false }),
+  })};
+
+  border-radius: ${conditional({
+    'toggle-group-multiple-border-radius': whenProps({ $multiple: true }),
+    'toggle-group-single-border-radius': whenProps({ $multiple: false }),
+  })};
 
   ${disableable()}
 
   ${Toggle} {
-    ${conditional({
-      'font-size: 10px;': whenProps({ $multiple: false, $scale: 'small' }),
+    height: ${conditional({
+      'toggle-single-height': whenProps({ $multiple: false, $scale: 'default' }),
+      'toggle-single-small-height': whenProps({ $multiple: false, $scale: 'small' }),
+      'toggle-multiple-height': whenProps({ $multiple: true, $scale: 'default' }),
+      'toggle-multiple-small-height': whenProps({ $multiple: true, $scale: 'small' }),
     })};
 
-    height: ${conditional({
-      '36px': whenProps({ $multiple: true, $scale: 'default' }),
-      '24px': whenProps({ $multiple: true, $scale: 'small' }),
-      '28px': whenProps({ $multiple: false, $scale: 'default' }),
-      '16px': whenProps({ $multiple: false, $scale: 'small' }),
+    font-size: ${conditional({
+      'toggle-single-font-size': whenProps({ $multiple: false, $scale: 'default' }),
+      'toggle-single-small-font-size': whenProps({ $multiple: false, $scale: 'small' }),
+      'toggle-multiple-font-size': whenProps({ $multiple: true, $scale: 'default' }),
+      'toggle-multiple-small-font-size': whenProps({ $multiple: true, $scale: 'small' }),
     })};
   }
 `
@@ -118,7 +131,7 @@ function ToggleGroup(props: ToggleGroupProps): JSX.Element {
       id={id}
       role={multiple ? 'group' : 'radiogroup'}
       align="center"
-      space={multiple ? 's' : 'xs'}
+      space="xs"
       $multiple={multiple}
       $scale={scale}
     >

package/src/components/TopNavigation/TopNavigation.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import type { PropsWithChildren } from 'react'
+import type { ReactNode } from 'react'
 import styled, { css } from 'styled-components'
 
 import { getToken as token } from 'theming'
@@ -33,7 +33,7 @@ const Container = styled.div`
 `
 
 export interface TopNavigationProps {
-  children: PropsWithChildren<unknown>
+  children?: ReactNode
 }
 
 function TopNavigation({ children }: TopNavigationProps): JSX.Element {