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

package/src/components/Accordion/Accordion.tsx

@@ -1,233 +0,0 @@
-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'
-
-import font from 'styles/font'
-import { getToken as token } from 'theming'
-import { Icon } from 'components/Icon'
-import conditional, { whenProps } from 'tools/conditional'
-import hoverable from 'styles/hoverable'
-import focusable from 'styles/focusable'
-import transition from 'styles/transition'
-import ellipsizable from 'styles/ellipsizable'
-import hidden from 'styles/hidden'
-
-import { AccordionProvider, useAccordionContext } from './Accordion.context'
-
-const StyledWrapper = styled.article<{ open: boolean }>`
-  background: ${token('color-neutral-white')};
-  border: 1px solid
-    ${conditional({
-      'color-neutral-light': whenProps({ open: false }),
-      'color-accent': whenProps({ open: true }),
-    })};
-  border-radius: ${token('border-radius-s')};
-
-  ${hoverable`
-    border-color: ${token('color-accent')};
-  `}
-`
-
-const StyledToggle = styled.button<{ open: boolean }>`
-  ${font({
-    height: 'font-height-2',
-  })}
-
-  ${transition()}
-
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-
-  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')};
-
-  background-color: ${token('color-transparent')};
-  border-radius: ${token('border-radius-s')};
-  border: none;
-  box-sizing: border-box;
-
-  padding: ${token('space-s')} ${token('space-m')};
-
-  width: 100%;
-
-  ${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({
-    '0': whenProps({ open: false }),
-    'space-m': 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 }),
-  })};
-
-  overflow-x: hidden;
-  overflow-y: auto;
-`
-
-const HiddenInput = styled.input`
-  ${hidden()}
-
-  &:not(:checked) + ${StyledContent} {
-    height: 0;
-  }
-
-  &:checked + ${StyledContent} {
-    height: 100%;
-  }
-`
-
-const StyledSpan = styled.span`
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-
-  pointer-events: none;
-`
-
-const Leading = styled(StyledSpan)`
-  margin: 0 ${token('space-xs')} 0 0;
-`
-
-const Trailing = styled(StyledSpan)`
-  margin: 0 0 0 auto;
-`
-
-const Children = styled.span`
-  pointer-events: none;
-
-  ${ellipsizable()}
-`
-
-function ToggleIndicator({ open }: { open: boolean }) {
-  return <Icon name={open ? 'minus' : 'plus'} size={16} />
-}
-
-function AccordionWrapper({
-  children,
-  ...others
-}: PropsWithChildren<HTMLAttributes<HTMLElement>>): JSX.Element {
-  const [open] = useAccordionContext()
-  return (
-    <StyledWrapper data-testid="accordion" open={open} {...others}>
-      {children}
-    </StyledWrapper>
-  )
-}
-
-export type AccordionToggleProps = {
-  leading?: ReactNode | ((expanded: boolean) => ReactNode)
-  trailing?: ReactNode | ((expanded: boolean) => ReactNode)
-}
-
-function AccordionToggle({
-  leading,
-  trailing: propsTrailing,
-  children,
-}: PropsWithChildren<AccordionToggleProps>): JSX.Element {
-  const [open, toggle] = useAccordionContext()
-
-  const trailing = propsTrailing === undefined ? <ToggleIndicator open={open} /> : propsTrailing
-
-  return (
-    <StyledToggle open={open} onClick={toggle} type="button" data-testid="accordion-toggle">
-      {leading && (
-        <Leading data-testid="accordion-toggle-leading">
-          {isFunction(leading) ? leading(open) : leading}
-        </Leading>
-      )}
-      <Children>{children}</Children>
-      {trailing && (
-        <Trailing data-testid="accordion-toggle-trailing">
-          {isFunction(trailing) ? trailing(open) : trailing}
-        </Trailing>
-      )}
-    </StyledToggle>
-  )
-}
-
-export type AccordionBodyProps = HTMLAttributes<HTMLElement>
-
-function AccordionBody({ children, ...props }: PropsWithChildren<AccordionBodyProps>): JSX.Element {
-  const [open] = useAccordionContext()
-
-  return (
-    <Fragment>
-      <HiddenInput type="checkbox" checked={open} onChange={identity} />
-      <StyledContent
-        open={open}
-        className={clsx({
-          'is-open': open,
-        })}
-        aria-hidden={!open ? 'true' : 'false'}
-        data-testid="accordion-content"
-        {...props}
-      >
-        {children}
-      </StyledContent>
-    </Fragment>
-  )
-}
-
-export interface AccordionProps extends HTMLAttributes<HTMLElement> {
-  expanded?: boolean
-  initialExpanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-}
-
-function Accordion({
-  children,
-  expanded,
-  initialExpanded,
-  onExpandedChange,
-  ...others
-}: AccordionProps): JSX.Element {
-  return (
-    <AccordionProvider
-      expanded={expanded}
-      initialExpanded={initialExpanded}
-      onExpandedChange={onExpandedChange}
-    >
-      <AccordionWrapper {...others}>{children}</AccordionWrapper>
-    </AccordionProvider>
-  )
-}
-
-Accordion.Toggle = AccordionToggle
-Accordion.Body = AccordionBody
-
-export default Accordion

package/src/components/Accordion/index.ts

@@ -1,2 +0,0 @@
-export { default as Accordion } from './Accordion'
-export type { AccordionProps, AccordionBodyProps, AccordionToggleProps } from './Accordion'

package/src/components/Banner/Banner.stories.tsx

@@ -1,213 +0,0 @@
-import React from 'react'
-import type { Meta } from '@storybook/react'
-import Banner, { BannerLarge, BannerAction, BannerActionLarge } from './Banner'
-import type { BannerProps, BannerActionProps } from './Banner'
-import { Icon } from 'components/Icon'
-
-const exampleIcons = {
-  Null: null,
-  CloseIcon: <Icon name="close" size={24} />,
-  DangerIcon: <Icon name="warning" size={24} />,
-  WarningIcon: <Icon name="warning" size={24} />,
-  SuccessIcon: <Icon name="check" size={24} />,
-  NeutralIcon: <Icon name="information" size={24} />,
-}
-
-export default {
-  title: 'Components/Banner',
-  component: Banner,
-  argTypes: {
-    scale: {
-      control: {
-        type: 'select',
-        options: ['default', 'large'],
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-        options: ['success', 'danger', 'warning', 'neutral'],
-      },
-    },
-    icon: {
-      options: Object.keys(exampleIcons),
-      mapping: exampleIcons,
-    },
-
-    onActionButtonClick: { action: 'clicked' },
-    onSecondaryActionButtonClick: { action: 'clicked' },
-    dismissible: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-} as Meta
-
-export function Playground(args: BannerProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Banner {...args} />
-    </div>
-  )
-}
-
-Playground.args = {
-  scale: 'default',
-  variant: 'success',
-  title: 'This is a success banner',
-}
-
-export function Warning(args: BannerProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Banner {...args} />
-    </div>
-  )
-}
-
-Warning.args = {
-  scale: 'default',
-  variant: 'warning',
-  title: 'This is a warning banner',
-}
-
-export function Danger(args: BannerProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Banner {...args} />
-    </div>
-  )
-}
-
-Danger.args = {
-  scale: 'default',
-  variant: 'danger',
-  title: 'This is a danger banner.',
-}
-
-export function Neutral(args: BannerProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Banner {...args} />
-    </div>
-  )
-}
-
-Neutral.args = {
-  scale: 'default',
-  variant: 'neutral',
-  title: 'This is a neutral banner.',
-}
-
-export function CustomIcon(args: BannerProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Banner {...args} />
-    </div>
-  )
-}
-
-CustomIcon.args = {
-  scale: 'default',
-  variant: 'neutral',
-  title: 'This is a neutral banner.',
-  icon: exampleIcons.CloseIcon,
-}
-
-export function Large(args: BannerProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <BannerLarge {...args} />
-    </div>
-  )
-}
-
-Large.args = {
-  scale: 'large',
-  variant: 'success',
-  title: 'This is a success banner',
-  description: 'This is a large banner with more details blablablablablablabla',
-}
-
-export function Action(args: BannerActionProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <BannerAction {...args} />
-    </div>
-  )
-}
-
-Action.args = {
-  scale: 'default',
-  variant: 'success',
-  title: 'This is a success banner with action',
-  action: 'Click me',
-}
-
-export function ActionWithSecondaryAction(args: BannerActionProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <BannerAction {...args} />
-    </div>
-  )
-}
-
-ActionWithSecondaryAction.args = {
-  scale: 'default',
-  variant: 'success',
-  title: 'This is a success banner with two actions',
-  action: 'Click me',
-  secondaryAction: 'Or click me',
-}
-
-export function ActionLarge(args: BannerActionProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <BannerActionLarge {...args} />
-    </div>
-  )
-}
-
-ActionLarge.args = {
-  scale: 'large',
-  variant: 'success',
-  title: 'This is a success banner with action',
-  description: 'This is a large banner with more details blablablablablablabla',
-  action: 'Click me',
-}
-
-export function ActionLargeWithSecondaryAction(args: BannerActionProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <BannerActionLarge {...args} />
-    </div>
-  )
-}
-
-ActionLargeWithSecondaryAction.args = {
-  scale: 'large',
-  variant: 'success',
-  title: 'This is a success banner with action',
-  description: 'This is a large banner with more details blablablablablablabla',
-  action: 'Click me',
-  secondaryAction: 'Or click me',
-}
-
-export function ActionLargeDismissibleWithSecondaryAction(args: BannerActionProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-2">
-      <BannerActionLarge {...args} />
-    </div>
-  )
-}
-
-ActionLargeDismissibleWithSecondaryAction.args = {
-  scale: 'large',
-  variant: 'success',
-  title: 'This is a success banner with action',
-  description: 'This is a large banner with more details blablablablablablabla',
-  action: 'Click me',
-  secondaryAction: 'Or click me',
-  dismissible: true,
-}

package/src/components/Banner/Banner.test.tsx

@@ -1,118 +0,0 @@
-import React from 'react'
-import userEvent from '@testing-library/user-event'
-
-import generator from '../../tests/generator'
-import renderer, { screen } from '../../tests/renderer'
-
-import Banner from './Banner'
-import { BannerAction } from './Banner'
-
-const setup = ({ ...overrides }) => renderer(<Banner {...overrides} />).render()
-const setupBannerAction = ({ ...overrides }) => renderer(<BannerAction {...overrides} />).render()
-
-const onActionButtonClick = jest.fn()
-const onSecondaryActionButtonClick = jest.fn()
-
-describe('<Banner />', () => {
-  it('renders title correctly', () => {
-    const props = {
-      title: generator.word(),
-    }
-
-    setup(props)
-    screen.getByText(props.title)
-  })
-
-  it('renders description correctly for large banner', () => {
-    const props = {
-      title: generator.word(),
-      description: generator.word(),
-      scale: 'large',
-    }
-
-    setup(props)
-    screen.getByText(props.description)
-  })
-
-  it('renders close button and able to close', () => {
-    const props = {
-      title: generator.word(),
-    }
-
-    setup(props)
-    screen.getByText(props.title)
-    const closeButton = screen.getByTestId('close-button')
-    userEvent.click(closeButton)
-    expect(screen.queryByText(props.title)).not.toBeInTheDocument()
-  })
-
-  it('does not render the close button', () => {
-    const props = {
-      title: generator.word(),
-      dismissible: false,
-    }
-
-    setup(props)
-
-    expect(screen.queryByTestId('close-button')).not.toBeInTheDocument()
-  })
-
-  it('calls onClose callback if provided', () => {
-    const mockHandleClose = jest.fn()
-
-    const props = {
-      title: generator.word(),
-      onClose: mockHandleClose,
-    }
-
-    setup(props)
-    screen.getByText(props.title)
-
-    const closeButton = screen.getByTestId('close-button')
-    userEvent.click(closeButton)
-    expect(screen.queryByText(props.title)).not.toBeInTheDocument()
-    expect(mockHandleClose).toHaveBeenCalled()
-  })
-
-  it('renders action buttons', () => {
-    const props = {
-      title: generator.word(),
-      action: 'click me',
-      secondaryAction: 'or click me',
-      onActionButtonClick: onActionButtonClick,
-      onSecondaryActionButtonClick: onSecondaryActionButtonClick,
-    }
-
-    setupBannerAction(props)
-
-    screen.getByText(props.title)
-    screen.getByText('click me')
-    screen.getByText('or click me')
-  })
-
-  it('allows to use React Element for title', () => {
-    const titleText = generator.word()
-    const props = {
-      title: <span data-testid="title-test-id">{titleText}</span>,
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('title-test-id')).toBeInTheDocument()
-  })
-
-  it('allows to use React Element for title and description on large banner', () => {
-    const titleText = generator.word()
-    const descriptionText = generator.word()
-    const props = {
-      title: <span data-testid="title-test-id">{titleText}</span>,
-      description: <span data-testid="description-test-id">{descriptionText}</span>,
-      scale: 'large',
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('title-test-id')).toBeInTheDocument()
-    expect(screen.getByTestId('description-test-id')).toBeInTheDocument()
-  })
-})