@loadsmart/loadsmart-ui 7.5.0 → 7.7.0-beta.1

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

@@ -1,53 +0,0 @@
-import React, { PropsWithChildren } from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-
-import MenuExpandable from './MenuExpandable'
-import type { MenuExpandableProps } from './MenuExpandable'
-import MenuLink from './MenuLink'
-import type { MenuLinkProps } from './MenuLink'
-import useID from 'hooks/useID'
-import { styledCompounds } from 'utils/toolset/styledCompounds'
-
-const MenuTitle = styled.div`
-  padding: ${token('space-s')} 0;
-  padding-left: ${token('space-l')};
-
-  color: ${token('color-neutral')};
-
-  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;
-`
-
-export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
-  label?: string
-}
-
-function Menu({ label, children, ...props }: MenuProps): JSX.Element {
-  const menuId = useID()
-
-  return (
-    <div role="menubar" aria-labelledby={menuId} {...props}>
-      {label && <MenuTitle id={menuId}>{label}</MenuTitle>}
-
-      {children}
-    </div>
-  )
-}
-
-type MenuItemProps = { active?: boolean } & PropsWithChildren<MenuLinkProps & MenuExpandableProps>
-
-function MenuItem(props: MenuItemProps) {
-  if (props.children) {
-    return <MenuExpandable {...props} />
-  }
-
-  return <MenuLink {...props} />
-}
-
-const StyledMenu = styled(Menu)({})
-
-export default styledCompounds(StyledMenu, { Item: MenuItem, SubItem: MenuLink })

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

@@ -1,64 +0,0 @@
-import React from 'react'
-import type { ReactNode, HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-import focusable from 'styles/focusable'
-import transition from 'styles/transition'
-import { getToken as token } from 'theming'
-import rem from 'utils/toolset/rem'
-import type { MenuLinkProps } from './MenuLink'
-
-export type MenuBaseItemProps = HTMLAttributes<HTMLElement> & {
-  label: string
-  leading?: ReactNode
-  trailing?: ReactNode
-  url?: string
-  subItems?: MenuLinkProps[]
-}
-
-const StyledMenuItem = styled.button`
-  ${transition({ duration: '0.25s' })};
-
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  padding: ${token('space-s')} 0;
-  padding-right: ${rem('12px')};
-  padding-left: ${token('space-l')};
-
-  color: ${token('color-neutral-white')};
-  font-weight: ${token('font-weight-bold')};
-  font-size: ${token('font-size-4')};
-  line-height: ${token('font-height-3')};
-
-  cursor: pointer;
-
-  ${focusable`
-    color: ${token('side-navigation-menu-item-color--focus')};
-  `}
-`
-
-const Leading = styled.div`
-  display: flex;
-  align-items: center;
-  padding-right: ${token('space-s')};
-`
-
-const Flex = styled.div`
-  display: flex;
-`
-
-function MenuBaseItem({ label, leading, trailing, ...props }: MenuBaseItemProps): JSX.Element {
-  return (
-    <StyledMenuItem {...props}>
-      <Flex>
-        {leading && <Leading>{leading}</Leading>}
-        {label}
-      </Flex>
-      {trailing && trailing}
-    </StyledMenuItem>
-  )
-}
-
-export default MenuBaseItem

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

@@ -1,107 +0,0 @@
-import React, { Fragment, useRef } from 'react'
-import type { PropsWithChildren, HTMLAttributes } from 'react'
-import styled from 'styled-components'
-import type { CSSProperties } from 'styled-components'
-
-import { Icon } from 'components/Icon'
-import { conditional, whenProps, prop } from 'tools/index'
-import { getToken as token } from 'theming'
-import transition from 'styles/transition'
-import { useHeightExpansionToggler } from 'hooks/useHeightExpansionToggler'
-
-import MenuLink from './MenuLink'
-import MenuBaseItem from './MenuBaseItem'
-
-interface IExpandable {
-  $expanded?: boolean
-  $height?: CSSProperties['height']
-}
-
-const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  margin-left: ${token('space-s')};
-`
-
-const StyledIcon = styled(Icon)<IExpandable>`
-  color: ${token('color-neutral')};
-
-  transform: rotate(
-    ${conditional({
-      '0deg': whenProps({ $expanded: true }),
-      '-90deg': whenProps({ $expanded: false }),
-    })}
-  );
-`
-
-const ExpandableItems = styled.div<IExpandable>`
-  overflow: hidden;
-  ${transition({ property: 'height' })}
-
-  height: ${prop('$height', 0)}px;
-
-  ${MenuLink} {
-    padding-left: ${token('space-xl')};
-  }
-`
-
-const ItemsWrapper = styled.div<IExpandable>`
-  ${transition()}
-
-  opacity: ${conditional({
-    0: whenProps({ $expanded: false }),
-    1: whenProps({ $expanded: true }),
-  })};
-
-  transform: translateY(
-    ${conditional({
-      '-10%': whenProps({ $expanded: false }),
-      '0%': whenProps({ $expanded: true }),
-    })}
-  );
-`
-
-export type MenuExpandableProps = HTMLAttributes<HTMLDivElement> &
-  PropsWithChildren<{
-    label: string
-  }>
-
-function MenuExpandable({ label, children, ...props }: MenuExpandableProps): JSX.Element {
-  const expandableItemsRef = useRef<HTMLDivElement>(null)
-  const { expanded, toggle, height } = useHeightExpansionToggler(expandableItemsRef)
-
-  return (
-    <div {...props} role="none">
-      <MenuBaseItem
-        onClick={toggle}
-        label={label}
-        trailing={
-          <IconWrapper>
-            <StyledIcon $expanded={expanded} name="chevron-down" size={16} />
-          </IconWrapper>
-        }
-        aria-haspopup="true"
-        aria-expanded={expanded}
-      />
-      <ExpandableItems $height={height} role="menu">
-        <ItemsWrapper $expanded={expanded} ref={expandableItemsRef} role="presentation">
-          {React.Children.map(children, (child) => {
-            if (!child) return Fragment
-
-            if (typeof child === 'object' && 'type' in child) {
-              return React.cloneElement(child, {
-                key: label,
-                tabIndex: expanded ? 0 : -1,
-                ariaHidden: !expanded,
-              })
-            }
-
-            return child
-          })}
-        </ItemsWrapper>
-      </ExpandableItems>
-    </div>
-  )
-}
-
-export default MenuExpandable

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

@@ -1,37 +0,0 @@
-import React from 'react'
-import type { ReactNode } from 'react'
-import styled, { css } from 'styled-components'
-
-import { getToken as token } from 'theming'
-import hoverable from 'styles/hoverable'
-import MenuBaseItem from './MenuBaseItem'
-
-const StyledMenuItem = styled(({ url, ...props }) => (
-  <MenuBaseItem as={url ? 'a' : 'button'} {...props} />
-))`
-  ${hoverable`
-    color: ${token('side-navigation-menu-link-color--hover')};
-  `}
-
-  ${({ active }) =>
-    active
-      ? css`
-          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')};
-        `
-      : ''}
-`
-
-export type MenuLinkProps = React.HTMLAttributes<HTMLAnchorElement> & {
-  label: string
-  leading?: ReactNode
-  trailing?: ReactNode
-  url?: string
-}
-
-function MenuLink({ url, ...props }: MenuLinkProps): JSX.Element {
-  return <StyledMenuItem href={url} url={url} {...props} role="menuitem" />
-}
-
-export default styled(MenuLink)({})

package/src/components/SideNavigation/Menu/index.ts

@@ -1 +0,0 @@
-export { default as Menu } from './Menu'

package/src/components/SideNavigation/Separator/Separator.test.tsx

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import { Separator } from './'
-import renderer from '../../../tests/renderer'
-
-const setup = ({ ...overrides } = {}) => renderer(<Separator {...overrides} />).render()
-
-describe('<Separator />', () => {
-  it('renders correctly', () => {
-    expect(() => {
-      setup()
-    }).not.toThrow()
-  })
-})

package/src/components/SideNavigation/Separator/Separator.tsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-
-const Line = styled.hr`
-  margin: ${token('side-navigation-component-margin-top')} 0;
-
-  color: ${token('side-navigation-separator-color')};
-`
-
-export interface SeparatorProps {
-  className?: string
-}
-
-function Separator(props: SeparatorProps): JSX.Element {
-  return <Line {...props} role="separator" />
-}
-
-export default Separator

package/src/components/SideNavigation/Separator/index.ts

@@ -1 +0,0 @@
-export { default as Separator } from './Separator'

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

@@ -1,69 +0,0 @@
-import React from 'react'
-import type { Meta } from '@storybook/react'
-
-import { Tag } from 'components/Tag'
-import { Icon } from 'components/Icon'
-
-import SideNavigation from './SideNavigation'
-import type { SideNavigationProps } from './SideNavigation'
-
-export default {
-  title: 'Components/SideNavigation',
-  component: SideNavigation,
-  argTypes: {},
-} as Meta
-
-export function Playground(args: SideNavigationProps): JSX.Element {
-  return (
-    <SideNavigation {...args}>
-      <SideNavigation.Logo url="#">
-        <img src="logo.svg" alt="The Logo" />
-      </SideNavigation.Logo>
-
-      <SideNavigation.Menu label="Quote & Book">
-        <SideNavigation.Menu.Item label="FTL" url="#" active />
-
-        <SideNavigation.Menu.Item label="LTL" url="#" />
-
-        <SideNavigation.Menu.Item label="Drayage" url="#" />
-
-        <SideNavigation.Menu.Item label="Michael G. Scott">
-          <SideNavigation.Menu.SubItem label="Account" url="#" />
-          <SideNavigation.Menu.SubItem label="My orders" />
-          <SideNavigation.Menu.SubItem label="Logout" />
-        </SideNavigation.Menu.Item>
-      </SideNavigation.Menu>
-
-      <SideNavigation.Separator />
-
-      <SideNavigation.Menu label="Custom item labels">
-        <SideNavigation.Menu.SubItem
-          leading={<Icon name="calendar" size={16} />}
-          label="Leading"
-          url="#"
-        />
-
-        <SideNavigation.Menu.SubItem
-          label="Trailing"
-          trailing={
-            <Tag size="small" variant="success">
-              NEW
-            </Tag>
-          }
-          url="#"
-        />
-
-        <SideNavigation.Menu.SubItem
-          leading={
-            <Tag size="small" variant="default">
-              225
-            </Tag>
-          }
-          label="Both"
-          trailing={<Icon name="check" size={16} />}
-          url="#"
-        />
-      </SideNavigation.Menu>
-    </SideNavigation>
-  )
-}

package/src/components/SideNavigation/SideNavigation.test.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import { SideNavigation } from './'
-import renderer from '../../tests/renderer'
-import generator from '../../tests/generator'
-import type { SideNavigationProps } from './SideNavigation'
-
-function setup(props: SideNavigationProps) {
-  renderer(<SideNavigation {...props} />).render()
-}
-
-describe('<SideNavigation />', () => {
-  it('renders correctly', () => {
-    expect(() => {
-      const title = generator.word()
-      setup({
-        children: <SideNavigation.Menu label={title} />,
-      })
-    }).not.toThrow()
-  })
-})

package/src/components/SideNavigation/SideNavigation.tsx

@@ -1,47 +0,0 @@
-import CloseButton from 'common/CloseButton'
-import type { CloseButtonProps } from 'common/CloseButton'
-import React, { ReactNode } from 'react'
-import styled, { css } from 'styled-components'
-
-import { getToken as token } from 'theming'
-
-import { Logo } from './Logo'
-import { Menu } from './Menu'
-import { Separator } from './Separator'
-
-const Container = styled.aside`
-  z-index: ${token('z-index-overlay')};
-  /* this was needed to force the side-navigation-width inside flex containers */
-  flex: 0 0 ${token('side-navigation-width')};
-  width: ${token('side-navigation-width')};
-  min-height: 100vh;
-  padding-top: ${token('space-l')};
-  padding-bottom: ${token('space-l')};
-  overflow: auto;
-
-  background-color: ${token('side-navigation-background-color')};
-
-  ${Logo} + * {
-    margin-top: ${token('space-xl')};
-  }
-
-  ${Menu} + ${Menu} {
-    margin-top: ${token('space-m')};
-  }
-`
-
-export interface SideNavigationProps {
-  className?: string
-  children: ReactNode
-}
-
-function SideNavigation({ className, children }: SideNavigationProps): JSX.Element {
-  return <Container className={className}>{children}</Container>
-}
-
-SideNavigation.Logo = Logo
-SideNavigation.Menu = Menu
-SideNavigation.Separator = Separator
-SideNavigation.CloseButton = styled(CloseButton)<CloseButtonProps>({})
-
-export default SideNavigation

package/src/components/SideNavigation/index.ts

@@ -1,5 +0,0 @@
-export { default as SideNavigation } from './SideNavigation'
-export type { SideNavigationProps } from './SideNavigation'
-
-export { default as useSideNavigation } from './useSideNavigation'
-export type { useSideNavigationProps } from './useSideNavigation'

package/src/components/SideNavigation/useSideNavigation.ts

@@ -1,36 +0,0 @@
-import { CustomTheme, getToken as token } from 'theming'
-import { useTheme } from 'styled-components'
-import useDialog from 'components/Dialog/useDialog'
-import { useMemo } from 'react'
-import useWindowResize from 'hooks/useWindowResize'
-import { BASE_PIXELS } from 'utils/toolset/rem'
-
-export interface useSideNavigationProps {
-  open: boolean
-  show: () => void
-  hide: () => void
-  toggle: () => void
-}
-
-function transformInPixels(value: string): number {
-  if (value.indexOf('rem') >= 0) {
-    return parseFloat(value) * BASE_PIXELS
-  }
-
-  return parseFloat(value)
-}
-
-function useSideNavigation(): useSideNavigationProps {
-  const size = useWindowResize()
-  const theme = useTheme() as CustomTheme
-
-  const shouldOpen = useMemo(() => {
-    const breakpoint = token('side-navigation-collapsing-breakpoint', { theme }) as string
-    const breakpointInPixels = transformInPixels(breakpoint)
-    return size.width > breakpointInPixels
-  }, [size])
-
-  return useDialog({ open: shouldOpen })
-}
-
-export default useSideNavigation

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

@@ -1,163 +0,0 @@
-import React, { ReactNode } from 'react'
-import styled from 'styled-components'
-import clsx from 'clsx'
-
-import { getToken as token } from 'theming'
-import conditional, { whenProps } from 'tools/conditional'
-import font from 'styles/font'
-import transition from 'styles/transition'
-
-import type { Step } from '../Steps.types'
-
-export interface StepsProgressProps {
-  steps: Array<Step>
-  current: number | string
-}
-
-const StepConnector = styled.span<{ complete: boolean }>`
-  position: absolute;
-  top: ${conditional({
-    'steps-conector-top': whenProps({ complete: false }),
-    'steps-conector-top--complete': whenProps({ complete: true }),
-  })};
-  right: calc(-50% + ${token('steps-indicator-size')} / 2);
-  left: calc(50% + ${token('steps-indicator-size')} / 2);
-
-  z-index: 0;
-
-  height: ${conditional({
-    'steps-conector-height': whenProps({ complete: false }),
-    'steps-conector-height--complete': whenProps({ complete: true }),
-  })};
-
-  background: ${conditional({
-    'steps-progress-step-background-color': whenProps({ complete: false }),
-    'steps-progress-step-background-color--complete': whenProps({ complete: true }),
-  })};
-`
-
-const ProgressStepWrapper = styled.li`
-  position: relative;
-
-  flex: 1;
-
-  text-align: center;
-
-  list-style: none;
-
-  &:last-child ${StepConnector} {
-    display: none;
-  }
-`
-
-const ProgressStepContainer = styled.div`
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  padding: 0 ${token('space-s')};
-`
-
-const StepIndicator = styled.span<{ current: boolean; complete: boolean }>`
-  ${transition()}
-
-  ${font({
-    weight: 'font-weight-bold',
-    height: 'steps-indicator-size',
-  })}
-
-  font-size: ${token('font-size-4')};
-
-  height: ${token('steps-indicator-size')};
-  width: ${token('steps-indicator-size')};
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  border-width: 2px;
-  border-style: solid;
-  border-color: ${conditional({
-    'steps-progress-step-background-color--complete': whenProps([
-      { current: true, complete: [true, false] },
-      { current: false, complete: true },
-    ]),
-    'steps-progress-step-background-color': whenProps({ current: false, complete: false }),
-  })};
-  border-radius: ${token('border-radius-circle')};
-
-  background: ${conditional({
-    'steps-progress-step-background-color--complete': whenProps([
-      { current: false, complete: true },
-    ]),
-    'color-neutral-white': whenProps([
-      { current: true, complete: [true, false] },
-      { current: false, complete: false },
-    ]),
-  })};
-
-  color: ${conditional({
-    'steps-progress-step-background-color': whenProps({ current: false, complete: false }),
-    'color-neutral-white': whenProps({ current: false, complete: true }),
-    'steps-progress-step-background-color--complete': whenProps({ current: true }),
-  })};
-`
-
-const StepLabel = styled.span<{ current: boolean; complete: boolean }>`
-  ${font({
-    height: 'font-height-2',
-  })}
-
-  position: relative;
-
-  font-weight: ${conditional({
-    'font-weight-medium': whenProps({ current: false }),
-    'font-weight-bold': whenProps({ current: true }),
-  })};
-
-  color: ${conditional({
-    'color-neutral-darker': whenProps([{ current: true }, { current: false, complete: true }]),
-    'color-neutral': whenProps({ current: false, complete: false }),
-  })};
-
-  font-size: ${token('font-size-4')};
-
-  display: flex;
-  flex-direction: row;
-
-  align-items: center;
-  justify-content: center;
-
-  text-align: center;
-
-  margin: ${token('space-xs')} 0 0 0;
-`
-
-function ProgressStep(props: { step: Step; current: boolean; indicator: ReactNode }): JSX.Element {
-  const { step, current, indicator } = props
-
-  return (
-    <ProgressStepWrapper>
-      <ProgressStepContainer
-        data-testid="steps-timeline-entry"
-        className={clsx({
-          'is-current': current,
-          'is-complete': step.complete,
-        })}
-      >
-        <StepIndicator aria-hidden="true" current={current} complete={step.complete}>
-          {indicator}
-        </StepIndicator>
-
-        <StepLabel current={current} complete={step.complete}>
-          {step.label}
-        </StepLabel>
-
-        <StepConnector complete={step.complete} />
-      </ProgressStepContainer>
-    </ProgressStepWrapper>
-  )
-}
-
-export default ProgressStep

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

@@ -1,37 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import ProgressStep from './ProgressStep'
-
-import type { Step } from '../Steps.types'
-
-export interface StepsProgressProps {
-  steps: Array<Step>
-  current: number | string
-}
-
-const ProgressWrapper = styled.ol<{ steps: Step[] }>`
-  position: relative;
-
-  display: flex;
-  flex-direction: row;
-
-  padding: ${token('steps-progress-padding-y')} ${token('steps-progress-padding-x')};
-`
-
-function StepsProgress(props: StepsProgressProps): JSX.Element {
-  const { steps, current } = props
-
-  return (
-    <ProgressWrapper steps={steps || []}>
-      {(steps || []).map(function renderStep(step, index) {
-        const { id } = step
-
-        return <ProgressStep key={id} current={current === id} indicator={index + 1} step={step} />
-      })}
-    </ProgressWrapper>
-  )
-}
-
-export default StepsProgress

package/src/components/Steps/ProgressSteps/index.ts

@@ -1 +0,0 @@
-export { default } from './ProgressSteps'