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

package/src/common/SelectionWrapper.tsx

@@ -1,130 +0,0 @@
-import React, { LabelHTMLAttributes, ReactNode } from 'react'
-import clsx from 'clsx'
-import styled from 'styled-components'
-
-import type ColorScheme from 'utils/types/ColorScheme'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import focusable from 'styles/focusable'
-import font from 'styles/font'
-import { getToken as token } from 'theming'
-import transition from 'styles/transition'
-
-export interface SelectionStyleProps {
-  scale?: 'small' | 'default'
-  scheme?: ColorScheme
-  disabled?: boolean
-}
-
-export interface SelectionWrapperProps
-  extends LabelHTMLAttributes<HTMLLabelElement>,
-    SelectionStyleProps {
-  selector: ReactNode
-  leading?: ReactNode
-  trailing?: ReactNode
-}
-
-const SelectorWrapper = styled.span`
-  position: relative;
-
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-`
-
-const StyledSpan = styled.span`
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-`
-
-const Leading = styled(StyledSpan)`
-  /* placeholder */
-`
-
-const Trailing = styled(StyledSpan)`
-  /* placeholder */
-`
-
-const Children = styled.span`
-  /* placeholder */
-`
-
-const StyledLabel = styled.label<SelectionStyleProps>`
-  box-sizing: border-box;
-
-  ${transition()}
-  ${font({
-    weight: 'checkbox-font-weight',
-  })}
-
-  display: inline-flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: flex-start;
-
-  cursor: pointer;
-
-  border-radius: ${token('border-radius-s')};
-
-  font-size: ${conditional({
-    'checkbox-font-size': whenProps({ scale: 'default' }),
-    'checkbox-small-font-size': whenProps({ scale: 'small' }),
-  })};
-
-  color: ${conditional({
-    'checkbox-color': whenProps({ scheme: 'light' }),
-    'checkbox-dark-color': whenProps({ scheme: 'dark' }),
-  })};
-
-  ${Children} {
-    margin: 0 ${token('space-xs')};
-  }
-
-  ${SelectorWrapper} {
-    margin: 0 ${token('space-xs')} 0 0;
-  }
-
-  ${Leading} {
-    margin: 0 ${token('space-xs')};
-  }
-
-  ${Trailing} {
-    margin: 0 0 0 ${token('space-xs')};
-  }
-
-  ${disableable()}
-
-  ${focusable`
-    outline: ${token('checkbox-selector-outline')};
-    outline-offset: ${token('checkbox-selector-outline-offset')};
-  `}
-`
-
-function SelectionWrapper({
-  selector,
-  children,
-  leading,
-  trailing,
-  className,
-  disabled = false,
-  ...others
-}: SelectionWrapperProps): JSX.Element {
-  return (
-    <StyledLabel
-      className={clsx(className, {
-        'is-disabled': disabled,
-      })}
-      {...others}
-    >
-      {selector && <SelectorWrapper>{selector}</SelectorWrapper>}
-      {leading && <Leading data-testid="selection-leading">{leading}</Leading>}
-      <Children>{children}</Children>
-      {trailing && <Trailing data-testid="selection-trailing">{trailing}</Trailing>}
-    </StyledLabel>
-  )
-}
-
-export default SelectionWrapper

package/src/components/Accordion/Accordion.context.tsx

@@ -1,36 +0,0 @@
-import React, { createContext, ReactNode, useState } from 'react'
-
-type AccordionContextType = [boolean, () => void]
-const AccordionContext = createContext<AccordionContextType | undefined>(undefined)
-
-function AccordionProvider({
-  expanded,
-  children,
-  onExpandedChange,
-  initialExpanded = false,
-}: {
-  children: ReactNode
-  initialExpanded?: boolean
-  expanded?: boolean
-  onExpandedChange?: (expanded: boolean) => void
-}): JSX.Element {
-  const [openState, setOpenState] = useState(initialExpanded)
-  const open = expanded ?? openState
-
-  function toggle() {
-    onExpandedChange?.(!open)
-    setOpenState(!open)
-  }
-
-  return <AccordionContext.Provider value={[open, toggle]}>{children}</AccordionContext.Provider>
-}
-
-function useAccordionContext(): AccordionContextType {
-  const context = React.useContext(AccordionContext)
-  if (!context) {
-    throw new Error('useAccordionContext must be used within an AccordionProvider')
-  }
-  return context
-}
-
-export { AccordionProvider, useAccordionContext }

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,186 +0,0 @@
-import React, { useState } from 'react'
-import Accordion from './Accordion'
-import type { AccordionProps } from './Accordion'
-
-import { Icon } from 'components/Icon'
-
-import generator from '../../tests/generator'
-import type { Meta } from '@storybook/react'
-
-export default {
-  title: 'Components/Accordion',
-  component: Accordion,
-  argTypes: {
-    scheme: {
-      description: 'Color scheme to be used',
-      table: {
-        type: {
-          summary: 'ColorScheme',
-        },
-        defaultValue: {
-          summary: 'light',
-        },
-      },
-      control: {
-        type: 'select',
-        options: ['light', 'dark'],
-      },
-      children: {
-        table: {
-          disable: true,
-        },
-      },
-    },
-  },
-  parameters: {
-    tokenPrefix: 'button',
-  },
-} as Meta
-
-export function Playground(args: AccordionProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-1">
-      <Accordion {...args}>
-        <Accordion.Toggle leading={<Icon name="warning" />}>
-          This is a cool accordion
-        </Accordion.Toggle>
-        <Accordion.Body>
-          <div className="flex flex-col space-y-4">
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-          </div>
-        </Accordion.Body>
-      </Accordion>
-      <Accordion {...args}>
-        <Accordion.Toggle>This is another cool accordion</Accordion.Toggle>
-        <Accordion.Body>
-          <div className="flex flex-col space-y-4">
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-          </div>
-        </Accordion.Body>
-      </Accordion>
-      <Accordion {...args} initialExpanded>
-        <Accordion.Toggle>This is an initial expanded cool accordion</Accordion.Toggle>
-        <Accordion.Body>
-          <div className="flex flex-col space-y-4">
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-          </div>
-        </Accordion.Body>
-      </Accordion>
-    </div>
-  )
-}
-
-export function CustomIndicators(): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-1">
-      <Accordion>
-        <Accordion.Toggle
-          leading={(expanded) => <Icon name={expanded ? 'minus' : 'plus'} />}
-          trailing={null}
-        >
-          Custom leading indicator
-        </Accordion.Toggle>
-        <Accordion.Body>
-          <div className="flex flex-col space-y-4">
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-          </div>
-        </Accordion.Body>
-      </Accordion>
-      <Accordion>
-        <Accordion.Toggle trailing={(expanded) => (expanded ? 'collapse' : 'expand')}>
-          Custom trailing indicator
-        </Accordion.Toggle>
-        <Accordion.Body>
-          <div className="flex flex-col space-y-4">
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-          </div>
-        </Accordion.Body>
-      </Accordion>
-    </div>
-  )
-}
-
-export function ControlledOpened(args: AccordionProps): JSX.Element {
-  return (
-    <div className="flex flex-col space-y-1">
-      <Accordion {...args} expanded>
-        <Accordion.Toggle>This is a controlled opened cool accordion</Accordion.Toggle>
-        <Accordion.Body>
-          <div className="flex flex-col space-y-4">
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-          </div>
-        </Accordion.Body>
-      </Accordion>
-    </div>
-  )
-}
-
-export function ControlledBasedOnExpandedProp(args: AccordionProps): JSX.Element {
-  const [isOpened, setIsOpened] = useState<boolean>(false)
-
-  const handleExpandChange = (opened: boolean) => {
-    setIsOpened(opened)
-  }
-
-  return (
-    <div className="flex flex-col space-y-1">
-      <Accordion {...args} expanded={isOpened} onExpandedChange={handleExpandChange}>
-        <Accordion.Toggle>This is another cool accordion</Accordion.Toggle>
-        <Accordion.Body>
-          <div className="flex flex-col space-y-4">
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-            <p>{generator.sentence()}</p>
-          </div>
-        </Accordion.Body>
-      </Accordion>
-    </div>
-  )
-}

package/src/components/Accordion/Accordion.test.tsx

@@ -1,209 +0,0 @@
-import userEvent from '@testing-library/user-event'
-import React from 'react'
-
-import generator from '../../tests/generator'
-import renderer, { fire, screen } from '../../tests/renderer'
-
-import Accordion from './Accordion'
-
-function AccordionElement({ ...overrides }) {
-  return (
-    <Accordion
-      expanded={overrides.expanded}
-      initialExpanded={overrides.initialExpanded}
-      onExpandedChange={overrides.onExpandedChange}
-    >
-      <Accordion.Toggle leading={overrides.leading} trailing={overrides.trailing}>
-        {overrides.title}
-      </Accordion.Toggle>
-      <Accordion.Body>{overrides.body}</Accordion.Body>
-    </Accordion>
-  )
-}
-
-const setup = ({ ...overrides }) => renderer(<AccordionElement {...overrides} />).render()
-
-describe('<Accordion />', () => {
-  it('renders children correctly', () => {
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-      trailing: undefined,
-    }
-
-    setup(props)
-
-    screen.getByText(props.title)
-    screen.getByText(props.body)
-    expect(screen.getByTestId('accordion-toggle')).toBeInTheDocument()
-    expect(screen.getByTestId('accordion-toggle-trailing')).toBeInTheDocument()
-  })
-
-  it('toggles content correctly', () => {
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'true')
-    fire.click(screen.getByText(props.title))
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'false')
-    fire.click(screen.getByText(props.title))
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'true')
-  })
-
-  it('renders content initial expanded', () => {
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-      initialExpanded: true,
-    }
-
-    setup(props)
-
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'false')
-  })
-
-  it('hides trailing when null', () => {
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-      trailing: null,
-    }
-
-    setup(props)
-
-    expect(screen.queryByTestId('accordion-toggle-trailing')).not.toBeInTheDocument()
-  })
-
-  it('hides trailing when false', () => {
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-      trailing: false,
-    }
-
-    setup(props)
-
-    expect(screen.queryByTestId('accordion-toggle-trailing')).not.toBeInTheDocument()
-  })
-
-  it('renders custom trailing', () => {
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-      trailing: (expanded: boolean) => (expanded ? 'collapse' : 'expand'),
-    }
-
-    setup(props)
-
-    expect(screen.getByRole('button')).toHaveTextContent(/expand/i)
-
-    userEvent.click(screen.getByRole('button'))
-
-    expect(screen.getByRole('button')).not.toHaveTextContent(/expand/i)
-    expect(screen.getByRole('button')).toHaveTextContent(/collapse/i)
-  })
-
-  it('renders and forces to be expanded', () => {
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-      expanded: true,
-    }
-
-    setup(props)
-
-    // Accordion should be expanded by default
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'false')
-    fire.click(screen.getByText(props.title))
-    // Trying to collapse accordion shouldn't collapse it because it's forced to be expanded
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'false')
-  })
-
-  it('renders with true as expanded prop default value', () => {
-    const onExpandedChange = jest.fn()
-
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-      expanded: true,
-      onExpandedChange,
-    }
-
-    const { rerender } = setup(props)
-
-    // Accordion should be expanded by default
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'false')
-
-    // Clicking on accordion title to toggle open value (it should collapse)
-    fire.click(screen.getByText(props.title))
-
-    // onExpandedChange callback should be called with "opened" value as false
-    expect(onExpandedChange).toHaveBeenCalledTimes(1)
-    expect(onExpandedChange).toHaveBeenLastCalledWith(false)
-
-    // Re-render because of props change
-    rerender(<AccordionElement {...{ ...props, expanded: false }} />)
-
-    // Accordion should be collapsed because of "collapsed" prop change
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'true')
-
-    // Clicking on accordion title to toggle open value (it should expand)
-    fire.click(screen.getByText(props.title))
-
-    // onExpandedChange callback should be called with "opened" value as true
-    expect(onExpandedChange).toHaveBeenCalledTimes(2)
-    expect(onExpandedChange).toHaveBeenLastCalledWith(true)
-
-    // Re-render because of props change
-    rerender(<AccordionElement {...{ ...props, expanded: true }} />)
-
-    // Accordion should be collapsed because of "expanded" prop change
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'false')
-  })
-
-  it('renders with false as expanded prop default value', () => {
-    const onExpandedChange = jest.fn()
-
-    const props = {
-      title: generator.word(),
-      body: generator.word(),
-      expanded: false,
-      onExpandedChange,
-    }
-
-    const { rerender } = setup(props)
-
-    // Accordion should be collapsed by default
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'true')
-
-    // Clicking on accordion title to toggle open value (it should expand)
-    fire.click(screen.getByText(props.title))
-
-    // onExpandedChange callback should be called with "opened" value as true
-    expect(onExpandedChange).toHaveBeenCalledTimes(1)
-    expect(onExpandedChange).toHaveBeenLastCalledWith(true)
-
-    // Re-render because of props change
-    rerender(<AccordionElement {...{ ...props, expanded: true }} />)
-
-    // Accordion should be expanded because of "expanded" prop change
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'false')
-
-    // Clicking on accordion title to toggle open value (it should collapse)
-    fire.click(screen.getByText(props.title))
-
-    // onExpandedChange callback should be called with "opened" value as false
-    expect(onExpandedChange).toHaveBeenCalledTimes(2)
-    expect(onExpandedChange).toHaveBeenLastCalledWith(false)
-
-    // Re-render because of props change
-    rerender(<AccordionElement {...{ ...props, expanded: false }} />)
-
-    // Accordion should be collapsed because of "expanded" prop change
-    expect(screen.getByTestId('accordion-content')).toHaveAttribute('aria-hidden', 'true')
-  })
-})