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

package/src/components/TopNavigation/Menu/Menu.test.tsx

@@ -1,125 +0,0 @@
-import React from 'react'
-import { ThemeProvider } from 'styled-components'
-import renderer, { screen, user } from '../../../tests/renderer'
-import { Menu } from './'
-import type { MenuProps } from './Menu'
-import { Alice } from '../../../theming/themes'
-
-function setup(props: MenuProps) {
-  return renderer(
-    <ThemeProvider theme={Alice}>
-      <Menu {...props} />
-    </ThemeProvider>
-  ).render()
-}
-
-describe('Menu', () => {
-  it('renders correctly navigation bar', () => {
-    setup({ children: null })
-
-    expect(screen.getByRole('navigation')).toBeInTheDocument()
-  })
-
-  it('renders a text link when only label is provided', () => {
-    setup({ children: <Menu.Item url="/check" label="Check" /> })
-
-    expect(screen.getByText('Check')).toBeInTheDocument()
-    expect(screen.getByRole('link', { name: 'Check' })).toHaveAttribute('href', '/check')
-  })
-
-  it('accepts onClick and calls it when performing an action', () => {
-    const onClick = jest.fn()
-
-    setup({ children: <Menu.Item onClick={onClick} label="Check" /> })
-
-    user.click(screen.getByRole('link', { name: 'Check' }))
-
-    expect(onClick).toHaveBeenCalledTimes(1)
-  })
-
-  it('renders an icon link when icon is provided', () => {
-    setup({
-      children: <Menu.Item icon={<span data-testid="icon" />} url="/schedule" label="Schedule" />,
-    })
-
-    expect(screen.getByTestId('icon')).toBeInTheDocument()
-
-    expect(screen.queryByText('Schedule')).not.toBeInTheDocument()
-
-    user.tab()
-
-    expect(document.activeElement as Element).toEqual(
-      screen.getByRole('link', { name: 'Schedule' })
-    )
-
-    expect(screen.getByRole('link', { name: 'Schedule' })).toHaveAttribute('href', '/schedule')
-  })
-
-  it('renders dropdown menu when subitems are provided', () => {
-    const username = 'Username'
-    const link = { label: 'Link', url: '/url' }
-    const action = { label: 'Logout', click: jest.fn() }
-
-    setup({
-      children: (
-        <Menu.Item label={username}>
-          <Menu.SubItem label={link.label} url={link.url} />
-          <Menu.SubItem label={action.label} onClick={action.click} />
-        </Menu.Item>
-      ),
-    })
-
-    expect(screen.getByText(username)).toBeInTheDocument()
-    expect(screen.queryByText(link.label)).not.toBeInTheDocument()
-    expect(screen.queryByText(action.label)).not.toBeInTheDocument()
-
-    user.click(screen.getByRole('button', { name: username }))
-
-    const linkSubItem = screen.getByRole('link', { name: link.label })
-    const buttonSubItem = screen.getByRole('menuitem', { name: action.label })
-
-    expect(linkSubItem).toBeVisible()
-    expect(linkSubItem).toHaveAttribute('href', link.url)
-
-    expect(buttonSubItem).toBeVisible()
-
-    user.click(buttonSubItem)
-
-    expect(action.click).toBeCalled()
-  })
-
-  // FIXME: Skipping as it's preventing test pipeline from being finished
-  it.skip('renders an accessible dropdown menu when children are provided', () => {
-    const username = 'Username'
-    const action = 'Log Out'
-
-    setup({
-      children: (
-        <Menu.Item label={username}>
-          <Menu.SubItem label={action} url="/logout" />
-        </Menu.Item>
-      ),
-    })
-
-    expect(screen.getByText(username)).toBeInTheDocument()
-    expect(screen.queryByText(action)).not.toBeInTheDocument()
-
-    user.tab()
-
-    expect(document.activeElement as Element).toEqual(
-      screen.getByRole('button', { name: username })
-    )
-
-    user.keyboard('{Enter}')
-
-    const subItem = screen.getByRole('link')
-
-    expect(subItem).toBeVisible()
-
-    user.tab()
-
-    expect(document.activeElement as Element).toEqual(subItem)
-
-    expect(subItem).toHaveAttribute('href', '/logout')
-  })
-})

package/src/components/TopNavigation/Menu/Menu.tsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import type { PropsWithChildren, ReactNode, HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import {
-  MenuItemDropdown,
-  MenuDropdown,
-  MenuDropdownSubItem,
-  MenuDropdownSeparator,
-} from './MenuItemDropdown'
-import { MenuItemIcon } from './MenuItemIcon'
-import conditional, { whenProps } from 'tools/conditional'
-
-type MenuItemProps = HTMLAttributes<HTMLElement> &
-  PropsWithChildren<{
-    label: string
-    icon?: ReactNode
-    url?: string
-  }>
-
-export type MenuProps = PropsWithChildren<{
-  align?: 'left' | 'right'
-}>
-
-const MenuContainer = styled.nav<{ $align: MenuProps['align'] }>`
-  ${conditional({
-    'margin-left: auto;': whenProps({ $align: 'right' }),
-  })}
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  & > * + * {
-    margin-left: ${token('space-m')};
-  }
-
-  & > * + ${MenuDropdown} {
-    margin-left: ${token('space-xl')};
-  }
-`
-
-function MenuItem(props: MenuItemProps): JSX.Element {
-  if (props.children) {
-    return <MenuItemDropdown {...props} />
-  }
-
-  return <MenuItemIcon {...props} />
-}
-
-function Menu(props: MenuProps): JSX.Element {
-  const { align = 'left' } = props
-
-  return <MenuContainer $align={align}>{props.children}</MenuContainer>
-}
-
-Menu.Item = MenuItem
-Menu.SubItem = MenuDropdownSubItem
-Menu.Separator = MenuDropdownSeparator
-
-export default Menu

package/src/components/TopNavigation/Menu/MenuItemDropdown.tsx

@@ -1,118 +0,0 @@
-import React from 'react'
-import type { PropsWithChildren, ReactNode, HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import transition from 'styles/transition'
-import { Dropdown, DropdownMenu, DropdownMenuItem, DropdownTrigger } from 'components/Dropdown'
-import { BaseLink } from 'components/Link'
-import useID from 'hooks/useID'
-import ellipsizable from 'styles/ellipsizable'
-import typography from 'styles/typography'
-import { Popover } from 'components/Popover'
-
-export const MenuDropdown = styled(Dropdown)({})
-
-export const MenuDropdownSeparator = styled.hr`
-  margin: ${token('space-s')} ${token('space-m')};
-
-  color: ${token('top-navigation-dropdown-separator-color')};
-`
-
-const MenuDropdownTrigger = styled(DropdownTrigger.Handle)`
-  color: ${token('top-navigation-dropdown-trigger-color')};
-`
-
-export const MenuDropdownLabel = styled.label`
-  ${transition()}
-
-  align-items: center;
-  display: flex;
-
-  ${typography('body-bold', { color: 'top-navigation-item-color' })}
-
-  cursor: pointer;
-
-  ${focusable`
-    color: ${token('top-navigation-item-color--hover')};
-  `}
-`
-
-const Ellipsizable = styled.span<{ $max: number }>`
-  ${ellipsizable()}
-
-  max-width: ${(props) => props.$max}px;
-`
-
-const IconWrapper = styled.div`
-  width: ${token('space-m')};
-`
-
-const MenuDropdownSubItemLink = styled(BaseLink)`
-  align-items: stretch;
-  ${typography('body', { color: 'top-navigation-dropdown-subitem-color' })}
-
-  ${hoverable`
-    text-decoration: none;
-    font-weight: inherit;
-  `}
-
-  ${focusable`
-    > * {
-      background-color: ${token('color-neutral-lighter')}
-    }
-  `}
-`
-
-type MenuDropdownSubItemProps = HTMLAttributes<HTMLElement> & {
-  label: string
-  url?: string
-  icon?: ReactNode
-  separator?: boolean
-}
-
-export function MenuDropdownSubItem({
-  icon,
-  label,
-  url,
-  ...rest
-}: MenuDropdownSubItemProps): JSX.Element {
-  return url ? (
-    <MenuDropdownSubItemLink {...rest} href={url}>
-      <DropdownMenuItem tabIndex={-1} leading={<IconWrapper>{icon}</IconWrapper>}>
-        {label}
-      </DropdownMenuItem>
-    </MenuDropdownSubItemLink>
-  ) : (
-    <DropdownMenuItem leading={<IconWrapper>{icon}</IconWrapper>} {...rest}>
-      {label}
-    </DropdownMenuItem>
-  )
-}
-
-export type MenuItemDropdownProps = PropsWithChildren<{
-  label: string
-}>
-
-function MenuItemDropdown(props: MenuItemDropdownProps): JSX.Element {
-  const { label, children, ...rest } = props
-  const labelId = useID()
-
-  return (
-    <MenuDropdown align="end" key={label}>
-      <Popover.Reference>
-        <MenuDropdownLabel>
-          <Ellipsizable $max={120} id={labelId}>
-            {label}
-          </Ellipsizable>
-          <MenuDropdownTrigger {...rest} tabIndex={0} aria-labelledby={labelId} />
-        </MenuDropdownLabel>
-      </Popover.Reference>
-      <DropdownMenu>{children}</DropdownMenu>
-    </MenuDropdown>
-  )
-}
-
-export { MenuItemDropdown }

package/src/components/TopNavigation/Menu/MenuItemIcon.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import type { ReactNode } from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import { BaseLink } from 'components/Link'
-import conditional, { whenProps } from 'tools/conditional'
-import typography from 'styles/typography'
-
-const MenuLink = styled(BaseLink)<{ hasIcon?: boolean }>`
-  ${typography('body-bold')}
-
-  color: ${conditional({
-    'top-navigation-item-icon-color': whenProps({ hasIcon: true }),
-    'top-navigation-item-color': whenProps({ hasIcon: false }),
-  })};
-
-  ${hoverable`
-    text-decoration: none;
-    color: ${token('top-navigation-item-color--hover')};
-  `}
-
-  ${focusable`
-    color: ${token('top-navigation-item-color--hover')};
-  `}
-`
-
-type MenuItemIconProps = {
-  label: string
-  icon?: ReactNode
-  url?: string
-}
-
-export function MenuItemIcon({ url, icon, label, ...rest }: MenuItemIconProps): JSX.Element {
-  if (icon) {
-    return (
-      <MenuLink {...rest} href={url} hasIcon title={label}>
-        {icon}
-      </MenuLink>
-    )
-  }
-
-  return (
-    <MenuLink {...rest} href={url}>
-      {label}
-    </MenuLink>
-  )
-}

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

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

package/src/components/TopNavigation/OpenSideNavButton/OpenSideNavButton.tsx

@@ -1,28 +0,0 @@
-import React from 'react'
-import styled from 'styled-components'
-
-import { getToken as token } from 'theming'
-import { Icon } from 'components/Icon'
-
-export type OpenSideNavButtonProps = {
-  className?: string
-  onClick: () => void
-}
-
-const Container = styled.button`
-  margin-right: ${token('space-2xl')};
-
-  background: none;
-  border: none;
-  cursor: pointer;
-`
-
-function OpenSideNavButton({ className, onClick }: OpenSideNavButtonProps): JSX.Element {
-  return (
-    <Container className={className} onClick={onClick}>
-      <Icon name="burguer-menu" size={24} data-testid="toggle-sidenav" />
-    </Container>
-  )
-}
-
-export default styled(OpenSideNavButton)<OpenSideNavButtonProps>({})

package/src/components/TopNavigation/OpenSideNavButton/index.ts

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

package/src/components/TopNavigation/TopNavigation.stories.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-
-import { Icon } from 'components/Icon'
-import { TopNavigation } from './'
-
-export default {
-  title: 'Components/TopNavigation',
-}
-
-export function Playground(): JSX.Element {
-  return (
-    <TopNavigation>
-      <TopNavigation.Logo url="#">
-        <img src="logo.svg" alt="The Logo" />
-      </TopNavigation.Logo>
-
-      <TopNavigation.Menu align="right">
-        <TopNavigation.Menu.Item label="Add Note" url="#" />
-
-        <TopNavigation.Menu.Item
-          icon={<Icon name="warning" size={20} />}
-          label="Schedule"
-          url="#"
-        />
-
-        <TopNavigation.Menu.Item label="Michael Scott Regional Manager">
-          <TopNavigation.Menu.SubItem label="Account" url="#" />
-          <TopNavigation.Menu.SubItem
-            label="Help Center"
-            icon={<Icon name="warning" size={20} />}
-            url="#"
-          />
-          <TopNavigation.Menu.Separator />
-          <TopNavigation.Menu.SubItem
-            label="Logout"
-            onClick={() => alert('Logout button clicked')}
-          />
-        </TopNavigation.Menu.Item>
-      </TopNavigation.Menu>
-    </TopNavigation>
-  )
-}

package/src/components/TopNavigation/TopNavigation.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import type { ReactNode } from 'react'
-import styled, { css } from 'styled-components'
-
-import { getToken as token } from 'theming'
-import { Logo } from './Logo'
-import { Menu } from './Menu'
-import { MenuDropdownLabel } from './Menu/MenuItemDropdown'
-import { OpenSideNavButton } from './OpenSideNavButton'
-
-/* We need to remove the 8px padding-right that DropdownTrigger adds (because of
-  BaseStyledButton), in order to keep it always 40px to the right, but only when
-  it's the last child. DropdownTigger isn't a StyledComponent so we need to use
-  MenuDropdownLabel here since it's the one that wraps DropdownTigger */
-const removeRightPadding = css`
-  > :last-child ${MenuDropdownLabel} {
-    margin-right: -${token('space-m')};
-  }
-`
-
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  height: ${token('top-navigation-height')};
-  padding: 0 ${token('space-2xl')};
-
-  background-color: ${token('top-navigation-background-color')};
-  border-bottom: solid 1px ${token('top-navigation-border-color')};
-
-  ${removeRightPadding}
-`
-
-export interface TopNavigationProps {
-  children?: ReactNode
-}
-
-function TopNavigation({ children }: TopNavigationProps): JSX.Element {
-  return <Container>{children}</Container>
-}
-
-TopNavigation.Logo = Logo
-TopNavigation.Menu = Menu
-TopNavigation.OpenSideNavButton = OpenSideNavButton
-
-export default TopNavigation

package/src/components/TopNavigation/index.ts

@@ -1,2 +0,0 @@
-export { default as TopNavigation } from './TopNavigation'
-export type { TopNavigationProps } from './TopNavigation'

package/src/components/VisuallyHidden/VisuallyHidden.mdx

@@ -1,26 +0,0 @@
-# VisuallyHidden
-
-Use this component to visually hide elements but keep them accessible to assistive technologies.
-
-Visually hide an element while still allowing it to be exposed to assistive technologies (such as screen readers) with `VisuallyHidden`.
-This would typically be used when you want to take advantage of the behavior and semantics of a native element like a checkbox or radio button, but replace it with a custom styled element visually.
-
-## Usage
-
-```tsx
-import { VisuallyHidden } from '@loadsmart/loadsmart-ui'
-
-const Example = () => (
-  <Layout.Stack>
-    <Text as="p">
-      Bellow you can&apos;t see the text, but assistive technologies can. Try to use devtools to
-      inspect this element.
-    </Text>
-    <Text as="p">
-      <VisuallyHidden>
-        This text is invisible but accessible by assistive technologies
-      </VisuallyHidden>
-    </Text>
-  </Layout.Stack>
-)
-```

package/src/components/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -1,32 +0,0 @@
-import { Layout } from 'components/Layout'
-import { Text } from 'components/Text'
-import React from 'react'
-
-import { VisuallyHidden } from '.'
-import Docs from './VisuallyHidden.mdx'
-
-export default {
-  title: 'Components/VisuallyHidden',
-  component: VisuallyHidden,
-  parameters: {
-    docs: {
-      page: Docs,
-    },
-  },
-}
-
-export function Playground(): JSX.Element {
-  return (
-    <Layout.Stack className="p-10 bg-neutral-dark w-60 text-center">
-      <Text color="color-neutral-white" as="p">
-        Bellow you can&apos;t see the text, but assistive technologies can. Try to use devtools to
-        inspect this element.
-      </Text>
-      <Text color="color-neutral-white" as="p">
-        <VisuallyHidden>
-          This text is invisible but accessible by assistive technologies
-        </VisuallyHidden>
-      </Text>
-    </Layout.Stack>
-  )
-}

package/src/components/VisuallyHidden/VisuallyHidden.test.tsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import { screen } from '@testing-library/react'
-
-import renderer from '../../tests/renderer'
-
-import hiddenStyle from 'styles/hidden'
-import { VisuallyHidden } from './VisuallyHidden'
-
-describe('VisuallyHidden', () => {
-  it('should render children accessibly', () => {
-    const children = 'Should not be visible'
-    const expectedHiddenStyle = hiddenStyle(true).replace(/!important/g, '')
-
-    renderer(<VisuallyHidden>{children}</VisuallyHidden>).render()
-
-    expect(screen.getByText(children)).toHaveStyle(expectedHiddenStyle)
-  })
-})

package/src/components/VisuallyHidden/VisuallyHidden.tsx

@@ -1,6 +0,0 @@
-import styled from 'styled-components'
-import hiddenStyle from 'styles/hidden'
-
-export const VisuallyHidden = styled.span`
-  ${hiddenStyle(true)}
-`

package/src/components/VisuallyHidden/index.ts

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

package/src/docs/tools/DatePickerEvent.stories.mdx

@@ -1,108 +0,0 @@
-import { Meta } from '@storybook/blocks'
-
-<Meta title="Tools/Tests/Date Picker Event" />
-
-# Date Picker Event
-
-Our [`DateRangePicker`](/?path=/story/components-date-datepicker--playground) component is fully tailored for the needs of our Design System. For that reason, writing unit tests for it would require prior knowledge about its inner structure. To prevent that and help with performing the main date selection features, we have exposed a few helper functions.
-
-The following functions descriptions consider this example:
-
-```jsx
-<div>
-  <Label htmlFor="my-date-picker">Select the date</Label>
-  <DatePicker id="my-date-picker" {...args} />
-</div>
-```
-
-## `expand`
-
-This asynchronous function will expand (show) the calendar if it's not already expanded.
-
-Example:
-
-```js
-const datePicker = screen.getByLabelText('Select the date')
-await DatePickerEvent.expand(datePicker)
-```
-
-## `collapse`
-
-This asynchronous function will collapse the calendar if it's not already collapsed.
-
-Example:
-
-```js
-const datePicker = screen.getByLabelText('Select the date')
-await DatePickerEvent.collapse(datePicker)
-```
-
-## `pick`
-
-This asynchronous function will select the provided date, formatted as `mm/dd/yyyy`.
-
-We collapse the calendar after selecting the date.
-
-If the provided date is already selected, nothing will happen.
-
-Example:
-
-```js
-const datePicker = screen.getByLabelText('Select the date')
-await DatePickerEvent.pick('02/28/2022', datePicker)
-```
-
-## `clear`
-
-This asynchronous function will clear the current date selection.
-
-If no date is selected, nothing will happen.
-
-Example:
-
-```js
-const datePicker = screen.getByLabelText('Select the date')
-await DatePickerEvent.clear(datePicker)
-```
-
-## `getSelectedDates`
-
-This asynchronous function will return the button elements that represent the selected dates.
-
-Example:
-
-```js
-const datePicker = screen.getByLabelText('Select the date')
-const selectedDateElements = await DatePickerEvent.getSelectedOptions(datePicker)
-```
-
-# Date Range Picker Event
-
-Our [`DateRangePickerEvent`](/?path=/story/components-date-daterangepicker--playground) testing utility follows the same API as the [`DatePickerEvent`](#date-picker-event), except for the `pick` function.
-
-It is important to notice that, since the date range selector has two inputs, you won't be able to refer to them specifically, as with the date picker. Internally, we get the `id` and `name` you provided as props and assign them to the start and end input elements, appending a `-start` or `-end` respectively.
-
-Consider this example:
-
-```jsx
-<div>
-  {/* Notice the `htmlFor` prop; it has to point to any of the `id`s */}
-  <Label htmlFor="my-date-picker-id-start">Select the date range</Label>
-  <DatePicker id="my-date-picker-id" name="my-date-picker-name" {...args} />
-</div>
-```
-
-The range start input will have `id: 'my-date-picker-id-start', name: 'my-date-picker-name-start'`, and the range end input will have `id: 'my-date-picker-id-end', name: 'my-date-picker-name-end'`.
-
-## `pick`
-
-This asynchronous function will select the provided date range `[string | null, string | null]`, with dates formatted as `mm/dd/yyyy`.
-
-We collapse the calendar after selecting the date range.
-
-Example:
-
-```js
-const datePicker = screen.getByLabelText('Select the date range')
-await DatePickerEvent.pick(['02/14/2022', '02/28/2022'], datePicker)
-```