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

package/src/components/ToggleGroup/Toggle.tsx

@@ -1,158 +0,0 @@
-import React, { useContext } from 'react'
-import styled from 'styled-components'
-
-import { BaseButton } from 'components/Button'
-import { getToken as token } from 'theming'
-import activatable from 'styles/activatable'
-import conditional, { whenProps } from 'tools/conditional'
-import disableable from 'styles/disableable'
-import focusable from 'styles/focusable'
-import hoverable from 'styles/hoverable'
-import isEmpty from 'utils/toolset/isEmpty'
-import ToggleGroupContext, { SelectableContext } from './ToggleGroupContext'
-
-import type { ToggleGroupOptionProps, ToggleGroupType } from './ToggleGroup.types'
-
-const ToggleButton = styled(BaseButton)<{ $type: ToggleGroupType }>`
-  text-transform: ${token('toggle-text-transform')};
-
-  background-color: ${conditional({
-    'toggle-background-color': whenProps({ 'aria-checked': false }),
-    'toggle-checked-background-color': whenProps({ 'aria-checked': true }),
-  })};
-
-  border-color: ${conditional({
-    'toggle-single-border-color': whenProps({ $type: 'single', 'aria-checked': false }),
-    'toggle-single-checked-border-color': whenProps({ $type: 'single', 'aria-checked': true }),
-    'toggle-multiple-border-color': whenProps({ $type: 'multiple', 'aria-checked': false }),
-    'toggle-multiple-checked-border-color': whenProps({ $type: 'multiple', 'aria-checked': true }),
-  })};
-
-  color: ${conditional({
-    'toggle-color': whenProps({ 'aria-checked': false }),
-    'toggle-checked-color': whenProps({ 'aria-checked': true }),
-  })};
-
-  padding: ${token('space-xs')} ${token('space-s')};
-
-  ${hoverable`
-    border-color: ${conditional({
-      'toggle-multiple-border-color--hover': whenProps({ $type: 'multiple' }),
-      'toggle-single-border-color--hover': whenProps({ $type: 'single' }),
-    })};
-
-    background-color: ${conditional({
-      'toggle-background-color--hover': whenProps({ 'aria-checked': false }),
-      'toggle-checked-background-color--hover': whenProps({ 'aria-checked': true }),
-    })};
-
-    color: ${conditional({
-      'toggle-color--hover': whenProps({ 'aria-checked': false }),
-      'toggle-checked-color--hover': whenProps({ 'aria-checked': true }),
-    })};
-  `}
-
-  ${focusable`
-    border-color: ${conditional({
-      'toggle-multiple-border-color--focus': whenProps({ $type: 'multiple' }),
-      'toggle-single-border-color--focus': whenProps({ $type: 'single' }),
-    })};
-
-    background-color: ${conditional({
-      'toggle-background-color--focus': whenProps({ 'aria-checked': false }),
-      'toggle-checked-background-color--focus': whenProps({ 'aria-checked': true }),
-    })};
-
-    color: ${conditional({
-      'toggle-color--focus': whenProps({ 'aria-checked': false }),
-      'toggle-checked-color--focus': whenProps({ 'aria-checked': true }),
-    })};
-
-    box-shadow: ${token('toggle-box-shadow')};
-    outline: ${token('toggle-outline')};
-    outline-offset: ${token('toggle-outline-offset')};
-  `}
-
-  ${activatable`
-    border-color:  ${conditional({
-      'toggle-multiple-border-color--active': whenProps({ $type: 'multiple' }),
-      'toggle-single-border-color--active': whenProps({ $type: 'single' }),
-    })};
-
-    background-color: ${conditional({
-      'toggle-background-color--active': whenProps({ 'aria-checked': false }),
-      'toggle-checked-background-color--active': whenProps({ 'aria-checked': true }),
-    })};
-
-    color: ${conditional({
-      'toggle-color--active': whenProps({ 'aria-checked': false }),
-      'toggle-checked-color--active': whenProps({ 'aria-checked': true }),
-    })};
-  `}
-
-  ${disableable`
-    background-color: ${conditional({
-      'toggle-background-color--disabled': whenProps({ 'aria-checked': false }),
-      'toggle-checked-background-color--disabled': whenProps({ 'aria-checked': true }),
-    })};
-
-    border-color: ${conditional({
-      'toggle-single-border-color--disabled': whenProps({ $type: 'single', 'aria-checked': false }),
-      'toggle-single-checked-border-color--disabled': whenProps({
-        $type: 'single',
-        'aria-checked': true,
-      }),
-      'toggle-multiple-border-color--disabled': whenProps({
-        $type: 'multiple',
-        'aria-checked': false,
-      }),
-      'toggle-multiple-checked-border-color--disabled': whenProps({
-        $type: 'multiple',
-        'aria-checked': true,
-      }),
-    })};
-
-    color: ${conditional({
-      'toggle-color--disabled': whenProps({ 'aria-checked': false }),
-      'toggle-checked-color--disabled': whenProps({ 'aria-checked': true }),
-    })};
-  `}
-`
-
-function isMultiple(type: ToggleGroupType) {
-  return type === 'multiple'
-}
-
-function Toggle({ value, children, disabled, ...others }: ToggleGroupOptionProps): JSX.Element {
-  const group = useContext(ToggleGroupContext)
-  const selectable = useContext(SelectableContext)
-
-  if (isEmpty(selectable)) {
-    throw Error('A Toggle options must be rendered inside a ToggleGroup')
-  }
-
-  const selected = selectable.selected.has(value)
-
-  return (
-    <ToggleButton
-      {...others}
-      $type={selectable.type()}
-      type="button"
-      role={isMultiple(selectable.type()) ? 'checkbox' : 'radio'}
-      aria-checked={selected}
-      disabled={Boolean(disabled || group.disabled)}
-      onClick={() => {
-        if (isMultiple(selectable.type())) {
-          selectable.toggle({ value })
-        } else {
-          selectable.select({ value })
-        }
-      }}
-      scale={group.scale}
-    >
-      {children}
-    </ToggleButton>
-  )
-}
-
-export default styled(Toggle)({})

package/src/components/ToggleGroup/ToggleGroup.constants.ts

@@ -1,16 +0,0 @@
-import type { ToggleGroupOptionProps } from './ToggleGroup.types'
-
-export const OPTIONS: ToggleGroupOptionProps[] = [
-  {
-    value: 'change',
-    label: 'Change it',
-  },
-  {
-    value: 'accept',
-    label: 'Accept it',
-  },
-  {
-    value: 'leave',
-    label: 'Leave it',
-  },
-]

package/src/components/ToggleGroup/ToggleGroup.stories.tsx

@@ -1,145 +0,0 @@
-import React from 'react'
-import type { Story, Meta } from '@storybook/react'
-
-import { Icon } from '../Icon'
-import { Label } from '../Label'
-
-import { OPTIONS } from './ToggleGroup.constants'
-import ToggleGroup from './ToggleGroup'
-
-import type { ToggleGroupProps } from './ToggleGroup.types'
-
-export default {
-  title: 'Components/ToggleGroup',
-  component: ToggleGroup,
-  argTypes: {
-    scale: {
-      options: ['default', 'small'],
-      control: {
-        type: 'select',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    theme: {
-      table: {
-        disable: true,
-      },
-    },
-    scheme: {
-      table: {
-        disable: true,
-      },
-    },
-    options: {
-      table: {
-        disable: true,
-      },
-    },
-    className: {
-      table: {
-        disable: true,
-      },
-    },
-    id: {
-      table: {
-        disable: true,
-      },
-    },
-    getToggleProps: {
-      table: {
-        disable: true,
-      },
-    },
-    onChange: {
-      table: {
-        disable: true,
-      },
-    },
-    name: {
-      table: {
-        disable: true,
-      },
-    },
-  },
-} as Meta
-
-export const Playground: Story<ToggleGroupProps> = (args) => {
-  return (
-    <div className="flex flex-col space-y-2">
-      <Label id="life_options_label">Pick your favorite advice option</Label>
-      <ToggleGroup
-        aria-labelledby="life_options_label"
-        id="life_options"
-        name="life_options"
-        {...args}
-        options={OPTIONS}
-      />
-    </div>
-  )
-}
-
-Playground.args = {
-  multiple: false,
-  scale: 'default',
-}
-
-const withIconOptions = [
-  {
-    label: 'Above',
-    value: true,
-    leading: <span>&clubs;</span>,
-  },
-  {
-    label: 'Below',
-    value: false,
-    leading: <span>&spades;</span>,
-  },
-]
-
-export const WithIcon: Story<ToggleGroupProps> = (args) => {
-  return (
-    <div className="flex flex-row">
-      <div className="flex flex-col space-y-2">
-        <Label id="rank_options_label">Pick your boolean option</Label>
-        <ToggleGroup
-          {...args}
-          aria-labelledby="rank_options_label"
-          id="rank_options"
-          name="rank_options"
-          options={withIconOptions}
-        />
-      </div>
-
-      <span className="inline-flex items-center mx-8 text-4xl font-thin border-l border-neutral"></span>
-      <div className="flex flex-col space-y-2">
-        <Label id="sort_options_label">Pick your sorting option</Label>
-        <ToggleGroup
-          {...args}
-          aria-labelledby="sort_options_label"
-          id="sort_options"
-          name="sort_options"
-        >
-          <ToggleGroup.Option value={1} leading={<Icon name="plus" />} aria-label="Sort ascending">
-            Sort asc
-          </ToggleGroup.Option>
-          <ToggleGroup.Option
-            value={-1}
-            leading={<Icon name="minus" />}
-            aria-label="Sort descending"
-          >
-            Sort desc
-          </ToggleGroup.Option>
-        </ToggleGroup>
-      </div>
-    </div>
-  )
-}
-
-WithIcon.args = {
-  multiple: false,
-  scale: 'default',
-}

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -1,237 +0,0 @@
-import React from 'react'
-import { composeStories } from '@storybook/react'
-
-import { OPTIONS } from './ToggleGroup.constants'
-import * as stories from './ToggleGroup.stories'
-import generator from '../../tests/generator'
-import renderer, { screen, fire } from '../../tests/renderer'
-
-import type { ToggleGroupProps, ToggleGroupOptionProps } from './ToggleGroup.types'
-
-const { Playground } = composeStories(stories)
-
-const setup = (overrides: Partial<ToggleGroupProps>) =>
-  renderer(<Playground {...overrides} />).render()
-
-describe('ToggleGroup', () => {
-  describe('single selection', () => {
-    it('renders correctly', () => {
-      const props = {
-        name: generator.word(),
-        onChange: jest.fn(),
-        multiple: false,
-      }
-
-      setup(props)
-
-      for (let i = 0; i < OPTIONS.length; i++) {
-        const option = OPTIONS[i]
-        expect(screen.getByText(option.label!)).toBeInTheDocument()
-      }
-    })
-
-    it('triggers onChange correctly', () => {
-      const props = {
-        id: generator.id(),
-        name: generator.word(),
-        multiple: false,
-        onChange: jest.fn(),
-      }
-
-      setup(props)
-
-      const selectedOption: ToggleGroupOptionProps = generator.pick(
-        OPTIONS
-      ) as ToggleGroupOptionProps
-      fire.click(screen.getByText(selectedOption.label!))
-
-      expect(props.onChange).toHaveBeenCalledWith({
-        target: {
-          id: props.id,
-          name: props.name,
-          value: selectedOption.value,
-        },
-      })
-
-      expect(screen.getByRole('radio', { name: selectedOption.label })).toBeChecked()
-    })
-
-    it('sets value correctly', () => {
-      const props = {
-        id: generator.id(),
-        name: generator.word(),
-        multiple: false,
-      }
-
-      setup(props)
-
-      const selectedOption: ToggleGroupOptionProps = generator.pick(
-        OPTIONS
-      ) as ToggleGroupOptionProps
-
-      fire.click(screen.getByText(selectedOption.label!))
-
-      expect(screen.getByRole('radio', { name: selectedOption.label })).toBeChecked()
-    })
-
-    it('renders correctly with initial value', () => {
-      const selectedOption: ToggleGroupOptionProps = generator.pick(
-        OPTIONS
-      ) as ToggleGroupOptionProps
-
-      const props = {
-        name: generator.word(),
-        onChange: jest.fn(),
-        multiple: false,
-        value: selectedOption.value,
-      }
-
-      setup(props)
-
-      expect(screen.getByRole('radio', { name: selectedOption.label })).toBeChecked()
-    })
-
-    it('changes value through prop value', () => {
-      const selectedOption: ToggleGroupOptionProps = generator.pick(
-        OPTIONS
-      ) as ToggleGroupOptionProps
-
-      const props = {
-        name: generator.word(),
-        onChange: jest.fn(),
-        multiple: false,
-        value: selectedOption.value,
-      }
-
-      const { rerender } = setup(props)
-
-      expect(screen.getByRole('radio', { name: selectedOption.label })).toBeChecked()
-
-      const newSelectedOption = generator.pick(OPTIONS) as ToggleGroupOptionProps
-
-      const newProps = { ...props, value: newSelectedOption.value }
-      rerender(<Playground {...newProps} />)
-
-      expect(screen.getByRole('radio', { name: newSelectedOption.label })).toBeChecked()
-    })
-  })
-
-  describe('multiple selection', () => {
-    it('renders correctly', () => {
-      const props = {
-        name: generator.word(),
-        onChange: jest.fn(),
-        multiple: true,
-      }
-
-      setup(props)
-
-      for (let i = 0; i < OPTIONS.length; i++) {
-        const option = OPTIONS[i]
-        screen.getByText(option.label!)
-      }
-    })
-
-    it('triggers onChange correctly', () => {
-      const props = {
-        id: generator.id(),
-        name: generator.word(),
-        multiple: true,
-        onChange: jest.fn(),
-      }
-
-      setup(props)
-
-      const selectedOptions = generator.pick(OPTIONS, {
-        amount: generator.natural({ min: 2, max: OPTIONS.length }),
-      }) as ToggleGroupOptionProps[]
-
-      selectedOptions.forEach((selectedOption) => {
-        fire.click(screen.getByText(selectedOption.label!))
-      })
-
-      expect(props.onChange).toHaveBeenNthCalledWith(selectedOptions.length, {
-        target: {
-          id: props.id,
-          name: props.name,
-          value: selectedOptions.map((option) => option.value),
-        },
-      })
-
-      selectedOptions.forEach((selectedOption) => {
-        expect(screen.getByRole('checkbox', { name: selectedOption.label })).toBeChecked()
-      })
-    })
-
-    it('sets value correctly', () => {
-      const props = {
-        id: generator.id(),
-        name: generator.word(),
-        multiple: true,
-      }
-
-      setup(props)
-
-      const selectedOptions = generator.pick(OPTIONS, {
-        amount: generator.natural({ min: 2, max: OPTIONS.length }),
-      }) as ToggleGroupOptionProps[]
-
-      selectedOptions.forEach((selectedOption) => {
-        fire.click(screen.getByText(selectedOption.label!))
-      })
-
-      selectedOptions.forEach((selectedOption) => {
-        expect(screen.getByRole('checkbox', { name: selectedOption.label })).toBeChecked()
-      })
-    })
-
-    it('renders correctly with initial value', () => {
-      const selectedOptions = generator.pick(OPTIONS, {
-        amount: generator.natural({ min: 2, max: OPTIONS.length }),
-      }) as ToggleGroupOptionProps[]
-
-      const props = {
-        name: generator.word(),
-        onChange: jest.fn(),
-        multiple: true,
-        value: selectedOptions.map((option) => option.value),
-      }
-
-      setup(props)
-
-      selectedOptions.forEach((selectedOption) => {
-        expect(screen.getByRole('checkbox', { name: selectedOption.label })).toBeChecked()
-      })
-    })
-
-    it('changes value through prop value', () => {
-      const selectedOptions = generator.pick(OPTIONS, {
-        amount: generator.natural({ min: 2, max: OPTIONS.length }),
-      }) as ToggleGroupOptionProps[]
-
-      const props = {
-        name: generator.word(),
-        onChange: jest.fn(),
-        multiple: true,
-        value: selectedOptions.map((option) => option.value),
-      }
-
-      const { rerender } = setup(props)
-
-      selectedOptions.forEach((selectedOption) => {
-        expect(screen.getByRole('checkbox', { name: selectedOption.label })).toBeChecked()
-      })
-
-      const newSelectedOptions = generator.pick(OPTIONS, {
-        amount: generator.natural({ min: 2, max: OPTIONS.length }),
-      }) as ToggleGroupOptionProps[]
-
-      const newProps = { ...props, value: newSelectedOptions.map((option) => option.value) }
-      rerender(<Playground {...newProps} />)
-
-      newSelectedOptions.forEach((selectedOption) => {
-        expect(screen.getByRole('checkbox', { name: selectedOption.label })).toBeChecked()
-      })
-    })
-  })
-})