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

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -1,239 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import React from 'react'
-import type { Meta } from '@storybook/react'
-
-import { Icon } from 'components/Icon'
-import { Stack } from 'components/Layout'
-import Text from 'components/Text/Text'
-import Button from 'components/Button/Button'
-import EmptyState from 'components/EmptyState/EmptyState'
-
-import type {
-  EmptyStateProps,
-  EmptyStateWithIllustrationProps,
-  EmptyStateWithIconProps,
-} from './EmptyState.types'
-import {
-  emptyStatePageProps,
-  emptyStatePageWithIllustrationElementProps,
-  emptyStatePanelProps,
-  emptyStatePanelWithIllustrationElementProps,
-  emptyStateCardProps,
-  emptyStateHorizontalCardProps,
-} from './EmptyState.mocks'
-
-const exampleIcons = {
-  Null: null,
-  CloseIcon: <Icon name="close" />,
-  DangerIcon: <Icon name="warning" />,
-  WarningIcon: <Icon name="warning" />,
-  SuccessIcon: <Icon name="check" />,
-  NeutralIcon: <Icon name="information" />,
-}
-
-export default {
-  title: 'Components/EmptyState',
-  component: EmptyState,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: ['page', 'panel', 'card', 'horizontal-card'],
-      },
-    },
-    illustration: {
-      control: {
-        type: 'text',
-      },
-    },
-    icon: {
-      options: Object.keys(exampleIcons),
-      mapping: exampleIcons,
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-    },
-    description: {
-      control: {
-        type: 'text',
-      },
-    },
-    action: {
-      label: {
-        control: {
-          type: 'text',
-        },
-      },
-      onClick: { action: 'clicked' },
-    },
-  },
-} as Meta
-
-export function Playground(args: EmptyStateProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <EmptyState {...args} />
-    </div>
-  )
-}
-
-Playground.args = emptyStatePageProps
-
-export function PlacedOnPage(args: EmptyStateWithIllustrationProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <i>Based on props:</i>
-      <br />
-      <EmptyState {...args} />
-      <br />
-      <br />
-      <i>Based on building blocks:</i>
-      <br />
-      <EmptyState variant="page">
-        <EmptyState.Illustration illustration={args.illustration!} scale="large" />
-        <Stack space="xs">
-          <Text variant="heading-sm-bold">{args.title}</Text>
-          <Text variant="body">{args.description}</Text>
-        </Stack>
-        <Button variant="primary" scale="default" onClick={args.action!.onClick}>
-          {args.action!.label}
-        </Button>
-      </EmptyState>
-    </div>
-  )
-}
-
-PlacedOnPage.args = emptyStatePageProps
-
-export function PlacedOnPageWithIllustrationElement(
-  args: EmptyStateWithIllustrationProps
-): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <i>Based on props:</i>
-      <br />
-      <EmptyState {...args} />
-      <br />
-      <br />
-      <i>Based on building blocks:</i>
-      <br />
-      <EmptyState variant="page">
-        <EmptyState.Illustration
-          illustration={<Icon name="information" size={240} />}
-          scale="large"
-        />
-        <Stack space="xs">
-          <Text variant="heading-sm-bold">{args.title}</Text>
-          <Text variant="body">{args.description}</Text>
-        </Stack>
-        <Button variant="primary" scale="default" onClick={args.action!.onClick}>
-          {args.action!.label}
-        </Button>
-      </EmptyState>
-    </div>
-  )
-}
-
-PlacedOnPageWithIllustrationElement.args = emptyStatePageWithIllustrationElementProps
-
-export function PlacedOnPanel(args: EmptyStateWithIllustrationProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <i>Based on props:</i>
-      <br />
-      <EmptyState {...args} />
-      <br />
-      <br />
-      <i>Based on building blocks:</i>
-      <br />
-      <EmptyState variant="panel">
-        <EmptyState.Illustration illustration={args.illustration!} scale="default" />
-        <Stack space="xs">
-          <Text variant="heading-sm-bold">{args.title}</Text>
-          <Text variant="body">{args.description}</Text>
-        </Stack>
-        <Button variant="primary" scale="small" onClick={args.action!.onClick}>
-          {args.action!.label}
-        </Button>
-      </EmptyState>
-    </div>
-  )
-}
-
-PlacedOnPanel.args = emptyStatePanelProps
-
-export function PlacedOnPanelWithIllustrationElement(
-  args: EmptyStateWithIllustrationProps
-): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <i>Based on props:</i>
-      <br />
-      <EmptyState {...args} />
-      <br />
-      <br />
-      <i>Based on building blocks:</i>
-      <br />
-      <EmptyState variant="panel">
-        <EmptyState.Illustration illustration={args.illustration!} scale="default" />
-        <Stack space="xs">
-          <Text variant="heading-sm-bold">{args.title}</Text>
-          <Text variant="body">{args.description}</Text>
-        </Stack>
-        <Button variant="primary" scale="small" onClick={args.action!.onClick}>
-          {args.action!.label}
-        </Button>
-      </EmptyState>
-    </div>
-  )
-}
-
-PlacedOnPanelWithIllustrationElement.args = emptyStatePanelWithIllustrationElementProps
-
-export function PlacedOnCard(args: EmptyStateWithIconProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <i>Based on props:</i>
-      <br />
-      <EmptyState {...args} />
-      <br />
-      <br />
-      <i>Based on building blocks:</i>
-      <br />
-      <EmptyState variant="card">
-        <Icon name="information" size={36} />
-        <Text variant="caption-bold">{args.title}</Text>
-        <Button variant="primary" scale="small" onClick={args.action!.onClick}>
-          {args.action!.label}
-        </Button>
-      </EmptyState>
-    </div>
-  )
-}
-
-PlacedOnCard.args = emptyStateCardProps
-
-export function PlacedOnHorizontalCard(args: EmptyStateProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <i>Based on props:</i>
-      <br />
-      <EmptyState {...args} />
-      <br />
-      <br />
-      <i>Based on building blocks:</i>
-      <br />
-      <EmptyState variant="horizontal-card">
-        <Icon name="information" size={24} />
-        <Text variant="caption-bold">{args.title}</Text>
-        <Button variant="primary" scale="small" onClick={args.action!.onClick}>
-          {args.action!.label}
-        </Button>
-      </EmptyState>
-    </div>
-  )
-}
-
-PlacedOnHorizontalCard.args = emptyStateHorizontalCardProps

package/src/components/EmptyState/EmptyState.test.tsx

@@ -1,101 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import React from 'react'
-import { composeStories } from '@storybook/react'
-import userEvent from '@testing-library/user-event'
-
-import * as stories from './EmptyState.stories'
-import renderer, { screen } from '../../tests/renderer'
-
-import type { EmptyStateProps } from './EmptyState.types'
-import {
-  emptyStatePageProps,
-  emptyStatePageWithIllustrationElementProps,
-  emptyStatePanelProps,
-  emptyStatePanelWithIllustrationElementProps,
-  emptyStateCardProps,
-  emptyStateHorizontalCardProps,
-} from './EmptyState.mocks'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<EmptyStateProps>) =>
-  renderer(<Playground {...overrides} />).render()
-
-describe('<EmptyState />', () => {
-  it('renders the title, description, action and illustration img in the page variant', () => {
-    setup(emptyStatePageProps)
-
-    expect(screen.getByRole('img')).toHaveAttribute('src', emptyStatePageProps.illustration)
-    screen.getByText(emptyStatePageProps.title!)
-    screen.getByText(emptyStatePageProps.description!)
-    screen.getByRole('button', { name: emptyStatePageProps.action!.label })
-  })
-
-  it('renders the title, description, action and illustration element in the page variant', () => {
-    setup(emptyStatePageWithIllustrationElementProps)
-
-    screen.getByTestId('information-svg')
-    screen.getByText(emptyStatePageWithIllustrationElementProps.title!)
-    screen.getByText(emptyStatePageWithIllustrationElementProps.description!)
-    screen.getByRole('button', { name: emptyStatePageWithIllustrationElementProps.action!.label })
-  })
-
-  it('renders the title, description, action and illustration img in the panel variant', () => {
-    setup(emptyStatePanelProps)
-
-    expect(screen.getByRole('img')).toHaveAttribute('src', emptyStatePanelProps.illustration)
-    screen.getByText(emptyStatePanelProps.title!)
-    screen.getByText(emptyStatePanelProps.description!)
-    screen.getByRole('button', { name: emptyStatePanelProps.action!.label })
-  })
-
-  it('renders the title, description, action and illustration element in the panel variant', () => {
-    setup(emptyStatePanelWithIllustrationElementProps)
-
-    screen.getByTestId('information-svg')
-    screen.getByText(emptyStatePanelWithIllustrationElementProps.title!)
-    screen.getByText(emptyStatePanelWithIllustrationElementProps.description!)
-    screen.getByRole('button', { name: emptyStatePanelWithIllustrationElementProps.action!.label })
-  })
-
-  it('renders the icon, title and action in the card variant', () => {
-    setup(emptyStateCardProps)
-
-    screen.getByTestId('information-svg')
-    screen.getByText(emptyStateCardProps.title!)
-    screen.getByRole('button', { name: emptyStateCardProps.action!.label })
-  })
-
-  it('renders the icon, title and action in the horizontal-card variant', () => {
-    setup(emptyStateHorizontalCardProps)
-
-    screen.getByTestId('information-svg')
-    screen.getByText(emptyStateHorizontalCardProps.title!)
-    screen.getByRole('button', { name: emptyStateHorizontalCardProps.action!.label })
-  })
-
-  it('renders only the elements for the provided properties', () => {
-    setup({ ...emptyStatePanelProps, description: undefined, action: undefined })
-
-    expect(screen.getByRole('img')).toHaveAttribute('src', emptyStatePanelProps.illustration)
-    screen.getByText(emptyStatePanelProps.title!)
-    expect(screen.queryByTestId('empty-state-description')).not.toBeInTheDocument()
-    expect(screen.queryByRole('button')).not.toBeInTheDocument()
-  })
-
-  it('calls the action callback if provided', () => {
-    const mockedOnClick = jest.fn()
-
-    setup({
-      ...emptyStatePanelProps,
-      action: { ...emptyStatePanelProps.action!, onClick: mockedOnClick },
-    })
-
-    const actionButton = screen.getByRole('button', {
-      name: emptyStateHorizontalCardProps.action!.label,
-    })
-
-    userEvent.click(actionButton)
-    expect(mockedOnClick).toHaveBeenCalled()
-  })
-})

package/src/components/EmptyState/EmptyState.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-
-import type {
-  EmptyStateProps,
-  EmptyStateWithIconProps,
-  EmptyStateWithIllustrationProps,
-} from './EmptyState.types'
-
-import EmptyStateWithIcon from './EmptyStateWithIcon'
-import EmptyStateWithIllustration from './EmptyStateWithIllustration'
-import Illustration from './Illustration'
-
-const EmptyState = (props: EmptyStateProps): JSX.Element => {
-  if (['card', 'horizontal-card'].includes(props.variant)) {
-    return <EmptyStateWithIcon {...(props as EmptyStateWithIconProps)} />
-  }
-  return <EmptyStateWithIllustration {...(props as EmptyStateWithIllustrationProps)} />
-}
-
-EmptyState.Illustration = Illustration
-
-export default EmptyState

package/src/components/EmptyState/EmptyState.types.ts

@@ -1,59 +0,0 @@
-import type { HTMLAttributes } from 'react'
-
-import type { ButtonProps } from 'components/Button'
-
-export type EmptyStateCommonProps = HTMLAttributes<HTMLDivElement> & {
-  /*
-   * Sets the context. Recommend to use a short title.
-   */
-  title?: string
-  /*
-   * Set up an optional action to get out of the empty state.
-   */
-  action?: Omit<ButtonProps, 'children'> & {
-    label: string
-  }
-}
-
-export type EmptyStateWithIconProps = EmptyStateCommonProps & {
-  /*
-   * Variations are based on where the empty state needs to be placed.
-   */
-  variant: 'card' | 'horizontal-card'
-  /*
-   * Adds visual context. Used only on card and horizontal-card variants.
-   * Keep in mind the recommended icon size for each variant:
-   * card -> 36
-   * horizontal-card -> 24
-   */
-  icon?: JSX.Element
-}
-
-export type EmptyStateWithIllustrationProps = EmptyStateCommonProps & {
-  /*
-   * Variations are based on where the empty state needs to be placed.
-   */
-  variant: 'page' | 'panel'
-  /*
-   * Adds visual context. Used only on page and panel variants.
-   * You can provide either an image source url or a JSX Element
-   */
-  illustration?: string | JSX.Element
-  /*
-   * Optionally adds more context. Used only on page and panel variants.
-   */
-  description?: string
-}
-
-export type EmptyStateProps = EmptyStateWithIconProps | EmptyStateWithIllustrationProps
-
-export type IllustrationProps = HTMLAttributes<HTMLDivElement> & {
-  /*
-   * You can provide either a source url or a JSX Element
-   */
-  illustration: string | JSX.Element
-  /*
-   * Sets up the illustration height. Default refers to 120px and large refers to 240px.
-   */
-  scale: 'default' | 'large'
-}

package/src/components/EmptyState/EmptyStateWithIcon.tsx

@@ -1,42 +0,0 @@
-import React, { FC, Fragment } from 'react'
-import styled from 'styled-components'
-
-import type { EmptyStateWithIconProps } from './EmptyState.types'
-
-import { Stack, Group } from 'components/Layout'
-import Text from 'components/Text/Text'
-import Button from 'components/Button/Button'
-
-const VerticalWrapper = styled(Stack)`
-  text-align: center;
-`
-
-const EmptyStateWithIcon: FC<EmptyStateWithIconProps> = ({
-  variant = 'card',
-  icon,
-  title,
-  action,
-  children,
-  ...props
-}: EmptyStateWithIconProps) => {
-  const isHorizontal = variant === 'horizontal-card'
-  const Wrapper = isHorizontal ? Group : VerticalWrapper
-
-  return (
-    <Wrapper {...props} space={isHorizontal ? 's' : 'xs'} align="center" justify="center">
-      {children || (
-        <Fragment>
-          {icon}
-          <Text variant="caption-bold">{title}</Text>
-          {action && (
-            <Button variant="primary" scale="small" {...action}>
-              {action.label}
-            </Button>
-          )}
-        </Fragment>
-      )}
-    </Wrapper>
-  )
-}
-
-export default EmptyStateWithIcon

package/src/components/EmptyState/EmptyStateWithIllustration.tsx

@@ -1,72 +0,0 @@
-import React, { FC, Fragment } from 'react'
-import styled from 'styled-components'
-
-import { Stack } from 'components/Layout'
-import Text from 'components/Text/Text'
-import Button from 'components/Button/Button'
-
-import type { EmptyStateWithIllustrationProps } from './EmptyState.types'
-import Illustration from './Illustration'
-
-const Wrapper = styled(Stack)`
-  max-width: 320px;
-
-  text-align: center;
-`
-
-const EmptyStateWithIllustration: FC<EmptyStateWithIllustrationProps> = ({
-  variant = 'page',
-  illustration,
-  title,
-  description,
-  action,
-  children,
-  ...props
-}: EmptyStateWithIllustrationProps) => {
-  const isPageVariant = variant === 'page'
-
-  return (
-    <Wrapper {...props} align="center" justify="center" space="m">
-      {children || (
-        <Fragment>
-          {illustration && (
-            <Illustration illustration={illustration} scale={isPageVariant ? 'large' : 'default'} />
-          )}
-          {(title || description) && (
-            <Stack space="xs">
-              {title && (
-                <Text
-                  variant={isPageVariant ? 'heading-sm-bold' : 'body-bold'}
-                  color={isPageVariant ? 'color-neutral-darkest' : 'color-neutral-darker'}
-                >
-                  {title}
-                </Text>
-              )}
-              {description && (
-                <Text
-                  data-testid="empty-state-description"
-                  variant={isPageVariant ? 'body' : 'caption'}
-                  color="color-neutral-darkest"
-                >
-                  {description}
-                </Text>
-              )}
-            </Stack>
-          )}
-          {action && (
-            <Button
-              className="empty-state-action"
-              variant="primary"
-              scale={isPageVariant ? 'default' : 'small'}
-              {...action}
-            >
-              {action.label}
-            </Button>
-          )}
-        </Fragment>
-      )}
-    </Wrapper>
-  )
-}
-
-export default EmptyStateWithIllustration

package/src/components/EmptyState/Illustration.tsx

@@ -1,29 +0,0 @@
-import React, { FC } from 'react'
-import styled from 'styled-components'
-
-import conditional, { whenProps } from 'tools/conditional'
-
-import type { IllustrationProps } from './EmptyState.types'
-
-const Wrapper = styled.div<Pick<IllustrationProps, 'scale'>>`
-  & > img:first-of-type,
-  SVG:first-of-type {
-    height: ${conditional({
-      '240px': whenProps({ scale: 'large' }),
-      '120px': whenProps({ scale: 'default' }),
-    })};
-    object-fit: cover;
-  }
-`
-
-export const Illustration: FC<IllustrationProps> = ({
-  illustration,
-  scale,
-  ...props
-}: IllustrationProps) => (
-  <Wrapper scale={scale} {...props}>
-    {typeof illustration === 'string' ? <img src={illustration} alt="" /> : illustration}
-  </Wrapper>
-)
-
-export default Illustration

package/src/components/EmptyState/index.ts

@@ -1,4 +0,0 @@
-export { default as EmptyState } from './EmptyState'
-export * from './EmptyState.types'
-
-export { Illustration } from './Illustration'

package/src/components/ErrorMessage/ErrorMessage.stories.tsx

@@ -1,26 +0,0 @@
-import React, { useState } from 'react'
-import type { Meta } from '@storybook/react'
-
-import ErrorMessage, { ErrorMessageProps } from './ErrorMessage'
-
-export default {
-  title: 'Components/ErrorMessage',
-  component: ErrorMessage,
-  argTypes: {
-    errorMessage: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-} as Meta
-
-type PlaygroundProps = ErrorMessageProps & { errorMessage?: string }
-
-export function Playground({ errorMessage, ...args }: PlaygroundProps): JSX.Element {
-  return <ErrorMessage>{errorMessage}</ErrorMessage>
-}
-
-Playground.args = {
-  errorMessage: 'File number exceeded: You can upload up to 3 files.',
-}

package/src/components/ErrorMessage/ErrorMessage.test.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-
-import generator from '../../tests/generator'
-
-import ErrorMessage from './ErrorMessage'
-
-const setup = (errorMessage: string) => render(<ErrorMessage>{errorMessage}</ErrorMessage>)
-
-describe('<ErrorMessage />', () => {
-  it('does not render if children is falsy', () => {
-    const { container } = setup('')
-
-    expect(container).toBeEmptyDOMElement()
-  })
-
-  it('renders the provided error message', () => {
-    const errorMessage = generator.sentence()
-
-    setup(errorMessage)
-
-    expect(screen.queryByText(errorMessage)).toBeVisible()
-  })
-})

package/src/components/ErrorMessage/ErrorMessage.tsx

@@ -1,19 +0,0 @@
-import React from 'react'
-
-import { TextProps, Text } from 'components/Text'
-
-export type ErrorMessageProps = Partial<TextProps>
-
-const ErrorMessage = ({ children, ...props }: ErrorMessageProps) => {
-  if (!children) {
-    return null
-  }
-
-  return (
-    <Text as="p" variant="caption-bold" color="color-danger" {...props}>
-      {children}
-    </Text>
-  )
-}
-
-export default ErrorMessage

package/src/components/ErrorMessage/index.ts

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

package/src/components/HighlightMatch/HighlightMatch.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import HighlightMatch, { HighlightMatchProps } from './HighlightMatch'
-
-export default {
-  title: 'Components/HighlightMatch',
-  component: HighlightMatch,
-} as Meta
-
-export const Playground: Story<HighlightMatchProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <div className="flex items-center flex-col">
-        <HighlightMatch {...args} />
-      </div>
-    </div>
-  )
-}
-
-Playground.args = {
-  text: 'This is an example',
-  match: 'example',
-}