@learningpool/ui 1.6.2 → 1.6.5

package/src/lib/components/atoms/Slider/Slider.test.tsx

@@ -1,103 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Slider from './Slider'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- Slider component', () => {
-  it('renders a slider', () => {
-    render(
-      <Slider data-testid="sliderTest" defaultValue={50} aria-label="label" />
-    )
-
-    expect(screen.getByTestId('sliderTest')).toMatchInlineSnapshot(`
-      <span
-        class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeMedium css-187mznn-MuiSlider-root"
-        data-testid="sliderTest"
-      >
-        <span
-          class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
-        />
-        <span
-          class="MuiSlider-track css-1gv0vcd-MuiSlider-track"
-          style="left: 0%; width: 50%;"
-        />
-        <span
-          class="MuiSlider-thumb MuiSlider-thumbColorPrimary MuiSlider-thumbSizeMedium css-eg0mwd-MuiSlider-thumb"
-          data-focusvisible="false"
-          data-index="0"
-          style="left: 50%;"
-        >
-          <input
-            aria-label="label"
-            aria-orientation="horizontal"
-            aria-valuemax="100"
-            aria-valuemin="0"
-            aria-valuenow="50"
-            data-index="0"
-            max="100"
-            min="0"
-            step="1"
-            style="border: 0px; height: 100%; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 100%; direction: ltr;"
-            type="range"
-            value="50"
-          />
-        </span>
-      </span>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(<Slider onClick={mockCallBack} value={0} aria-label="label" />)
-
-    userEvent.click(screen.getByLabelText('label'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('should be disabled', () => {
-    render(<Slider disabled defaultValue={50} aria-label="label" />)
-
-    const slider = screen.getByLabelText('label')
-    expect(slider).toBeDisabled()
-  })
-
-  it('has a discrete range of values', () => {
-    render(<Slider value={[25, 50]} defaultValue={25} />)
-
-    const sliderMin = screen.getByDisplayValue('25')
-    expect(sliderMin).toHaveValue('25')
-    expect(sliderMin).toHaveAttribute('aria-valuenow', '25')
-
-    const sliderMax = screen.getByDisplayValue('50')
-    expect(sliderMax).toHaveValue('50')
-    expect(sliderMax).toHaveAttribute('aria-valuenow', '50')
-  })
-
-  it('has a proper default value', () => {
-    render(<Slider defaultValue={100} aria-label="label" />)
-
-    const slider = screen.getByLabelText('label')
-    expect(slider).toHaveAttribute('value', '100')
-  })
-
-  it('has the proper aria attributes', () => {
-    render(<Slider defaultValue={50} aria-label="label" />)
-
-    const slider = screen.getByLabelText('label')
-    expect(slider).toHaveAttribute('aria-label', 'label')
-    expect(slider).toHaveAttribute('aria-valuenow', '50')
-    expect(slider).toHaveAttribute('aria-valuemin', '0')
-    expect(slider).toHaveAttribute('aria-valuemax', '100')
-  })
-
-  it('has the proper type attribute', () => {
-    render(<Slider defaultValue={50} aria-label="label" />)
-
-    const slider = screen.getByLabelText('label')
-    expect(slider).toHaveAttribute('type', 'range')
-  })
-})

package/src/lib/components/atoms/Slider/Slider.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import MUISlider, { SliderProps } from '@mui/material/Slider'
-
-interface ISliderProps extends SliderProps {}
-
-export default function Slider ({ ...rest }: ISliderProps): JSX.Element {
-  return (
-    <MUISlider {...rest} />
-  )
-}

package/src/lib/components/atoms/Switch/Switch.test.tsx

@@ -1,96 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import Switch from './Switch'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- Switch component', () => {
-  it('renders a switch', () => {
-    render(
-      <Switch
-        data-testid="switchTest"
-        inputProps={{
-          'aria-label': 'label'
-        }}
-      />
-    )
-
-    expect(screen.getByTestId('switchTest')).toMatchInlineSnapshot(`
-      <span
-        class="MuiButtonBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary css-5ryogn-MuiButtonBase-root-MuiSwitch-switchBase"
-        data-testid="switchTest"
-      >
-        <input
-          aria-label="label"
-          class="PrivateSwitchBase-input MuiSwitch-input css-1m9pwf3"
-          type="checkbox"
-        />
-        <span
-          class="MuiSwitch-thumb css-jsexje-MuiSwitch-thumb"
-        />
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </span>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(<Switch onClick={mockCallBack} data-testid="switchTest" />)
-
-    userEvent.click(screen.getByTestId('switchTest'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('changes checked state on click', () => {
-    render(<Switch />)
-    const switchTest = screen.getByRole('checkbox')
-
-    // Check initial state
-    expect(switchTest).not.toBeChecked()
-
-    // Check state after click
-    userEvent.click(switchTest)
-    expect(switchTest).toBeChecked()
-  })
-
-  it('should be disabled', () => {
-    render(<Switch disabled />)
-
-    const switchTest = screen.getByRole('checkbox')
-    expect(switchTest).toBeDisabled()
-  })
-
-  it('has the proper aria attributes', () => {
-    const { rerender } = render(
-      <Switch inputProps={{ 'aria-label': 'test label' }} />
-    )
-
-    // Default Switch has proper aria attributes
-    const switchInput = screen.getByRole('checkbox')
-    expect(switchInput).toHaveAttribute('aria-label', 'test label')
-    expect(switchInput).not.toHaveAttribute('aria-disabled')
-
-    // Disabled Switch has proper aria attribute
-    rerender(<Switch data-testid="switchTest" disabled />)
-    const switchSpan = screen.getByTestId('switchTest')
-    expect(switchSpan).toHaveAttribute('aria-disabled')
-  })
-
-  it('has the proper type attribute', () => {
-    render(<Switch />)
-    expect(screen.getByRole('checkbox')).toHaveAttribute('type', 'checkbox')
-  })
-
-  it('changes color', () => {
-    // Color prop changes css class
-    render(<Switch data-testid="switchTest" color="success" />)
-    expect(screen.getByTestId('switchTest')).toHaveClass(
-      'MuiSwitch-colorSuccess'
-    )
-  })
-})

package/src/lib/components/atoms/Switch/Switch.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import MUISwitch, { SwitchProps } from '@mui/material/Switch'
-
-interface ISwitchProps extends SwitchProps {}
-
-export default function Switch ({ ...rest }: ISwitchProps): JSX.Element {
-  return (
-    <MUISwitch {...rest} />
-  )
-}

package/src/lib/components/atoms/TextField/TextField.test.tsx

@@ -1,131 +0,0 @@
-/* eslint-disable no-irregular-whitespace */
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import TextField from './TextField'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- TextField component', () => {
-  it('renders an outlined textField by default', () => {
-    render(
-      <TextField
-        data-testid="textFieldTest"
-        inputProps={{
-          'aria-label': 'label'
-        }}
-      />
-    )
-
-    expect(screen.getByTestId('textFieldTest')).toMatchInlineSnapshot(`
-      <div
-        class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
-        data-testid="textFieldTest"
-      >
-        <div
-          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root"
-        >
-          <input
-            aria-invalid="false"
-            aria-label="label"
-            class="MuiInputBase-input MuiOutlinedInput-input css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input"
-            id="mui-1"
-            type="text"
-            value=""
-          />
-          <fieldset
-            aria-hidden="true"
-            class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-          >
-            <legend
-              class="css-hdw1oc"
-            >
-              <span
-                class="notranslate"
-              >
-                ​
-              </span>
-            </legend>
-          </fieldset>
-        </div>
-      </div>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(<TextField onClick={mockCallBack} data-testid="textFieldTest" />)
-
-    userEvent.click(screen.getByTestId('textFieldTest'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('changes focused state on click', () => {
-    render(
-      <TextField
-        inputProps={{
-          'data-testid': 'textFieldTest'
-        }}
-        label="outlined"
-      />
-    )
-    const textFieldTest = screen.getByTestId('textFieldTest')
-
-    // Check initial state
-    expect(textFieldTest).not.toHaveFocus()
-
-    // Check state after click
-    userEvent.click(textFieldTest)
-    expect(textFieldTest).toHaveFocus()
-  })
-
-  it('should be disabled', () => {
-    render(
-      <TextField
-        inputProps={{
-          'data-testid': 'textFieldTest'
-        }}
-        disabled
-      />
-    )
-
-    const textFieldTest = screen.getByTestId('textFieldTest')
-    expect(textFieldTest).toBeDisabled()
-  })
-
-  it('has the proper aria attributes', () => {
-    render(
-      <TextField
-        inputProps={{
-          'aria-label': 'test label',
-          'data-testid': 'textFieldTest'
-        }}
-      />
-    )
-
-    // Default TextField has proper aria attributes
-    const textFieldInput = screen.getByTestId('textFieldTest')
-    expect(textFieldInput).toHaveAttribute('aria-label', 'test label')
-    expect(textFieldInput).not.toHaveAttribute('aria-disabled')
-  })
-
-  it('has the proper type attribute', () => {
-    render(
-      <TextField
-        inputProps={{
-          'data-testid': 'textFieldTest'
-        }}
-      />
-    )
-    const textFieldInput = screen.getByTestId('textFieldTest')
-    expect(textFieldInput).toHaveAttribute('type', 'text')
-  })
-
-  // it("changes color", () => {
-  //   // Color prop changes css class
-  //   render(<TextField data-testid="textFieldTest" color="success" />);
-  //   expect(screen.getByTestId("textFieldTest")).toHaveClass("MuiTextField-colorSuccess");
-  // });
-})

package/src/lib/components/atoms/TextField/TextField.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import MUITextField, { BaseTextFieldProps } from '@mui/material/TextField'
-import { OutlinedInputProps } from '@mui/material/OutlinedInput'
-
-interface ITextFieldProps extends BaseTextFieldProps {
-  /**
-   * Callback fired when the value is changed.
-   *
-   * @param {object} event The event source of the callback.
-   * You can pull out the new value by accessing `event.target.value` (string).
-   */
-  onChange?: OutlinedInputProps['onChange']
-  /**
-   * The variant to use.
-   * @default 'outlined'
-   */
-  variant?: 'outlined'
-  /**
-   * Props applied to the Input element.
-   * It will be a [`FilledInput`](/api/filled-input/),
-   * [`OutlinedInput`](/api/outlined-input/) or [`Input`](/api/input/)
-   * component depending on the `variant` prop value.
-   */
-  InputProps?: Partial<OutlinedInputProps>
-}
-
-export default function TextField (props: ITextFieldProps): JSX.Element {
-  return (
-    <MUITextField {...props} />
-  )
-}

package/src/lib/components/atoms/ToggleButton/ToggleButton.test.tsx

@@ -1,122 +0,0 @@
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import ToggleButton from '../../../../lib/components/atoms/ToggleButton/ToggleButton'
-import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'
-
-// Note: running cleanup afterEach is done automatically for you in @testing-library/react@9.0.0 or higher
-// unmount and cleanup DOM after the test is finished.
-afterEach(cleanup)
-
-describe('Test -- ToggleButton component', () => {
-  it('renders a ToggleButton', () => {
-    render(
-      <ToggleButton
-        aria-label="label"
-        value="check"
-        data-testid="toggleButtonTest"
-      >
-        ToggleButton
-      </ToggleButton>
-    )
-
-    expect(screen.getByTestId('toggleButtonTest')).toMatchInlineSnapshot(`
-      <button
-        aria-label="label"
-        class="MuiButtonBase-root MuiToggleButton-root MuiToggleButton-sizeMedium MuiToggleButton-standard css-ueukts-MuiButtonBase-root-MuiToggleButton-root"
-        data-testid="toggleButtonTest"
-        tabindex="0"
-        type="button"
-        value="check"
-      >
-        ToggleButton
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
-      </button>
-    `)
-  })
-
-  it('responds to a click event', () => {
-    const mockCallBack = jest.fn()
-    render(
-      <ToggleButton
-        onClick={mockCallBack}
-        value={0}
-        data-testid="toggleButtonTest"
-      />
-    )
-
-    userEvent.click(screen.getByTestId('toggleButtonTest'))
-    expect(mockCallBack.mock.calls.length).toEqual(1)
-  })
-
-  it('has the proper attributes', () => {
-    render(
-      <ToggleButtonGroup
-        value="two"
-        aria-label="ToggleButtonGroup label"
-        data-testid="toggleButtonTest"
-      >
-        <ToggleButton value="one" aria-label="ToggleButton one">One</ToggleButton>
-        <ToggleButton value="two" aria-label="ToggleButton two">Two</ToggleButton>
-        <ToggleButton value="three" aria-label="ToggleButton three" disabled>Three</ToggleButton>
-      </ToggleButtonGroup>
-    )
-
-    // Check toggleButtonGroup
-    const toggleButtonGroup = screen.getByTestId('toggleButtonTest')
-    expect(toggleButtonGroup).toHaveAttribute('aria-label', 'ToggleButtonGroup label')
-    expect(toggleButtonGroup).toHaveAttribute('role', 'group')
-
-    // Check toggleButton default
-    const toggleButtonOne = screen.getByLabelText('ToggleButton one')
-    expect(toggleButtonOne).toHaveAttribute('aria-pressed', 'false')
-    expect(toggleButtonOne).toHaveAttribute('tabindex', '0')
-
-    // Check toggleButton selected
-    const toggleButtonTwo = screen.getByLabelText('ToggleButton two')
-    expect(toggleButtonTwo).toHaveAttribute('aria-pressed', 'true')
-
-    // Check toggleButton disabled
-    const toggleButtonThree = screen.getByLabelText('ToggleButton three')
-    expect(toggleButtonThree).toBeDisabled()
-  })
-
-  it('properly changes focus state', () => {
-    render(
-      <ToggleButtonGroup
-        value="two"
-        aria-label="ToggleButtonGroup label"
-        data-testid="toggleButtonTest"
-      >
-        <ToggleButton value="one" aria-label="ToggleButton one">One</ToggleButton>
-        <ToggleButton value="two" aria-label="ToggleButton two">Two</ToggleButton>
-        <ToggleButton value="three" aria-label="ToggleButton three" disabled>Three</ToggleButton>
-      </ToggleButtonGroup>
-    )
-    const toggleButtonOne = screen.getByLabelText('ToggleButton one')
-    const toggleButtonTwo = screen.getByLabelText('ToggleButton two')
-    const toggleButtonThree = screen.getByLabelText('ToggleButton three')
-
-    // Check initial state
-    expect(toggleButtonOne).not.toHaveFocus()
-    expect(toggleButtonTwo).not.toHaveFocus()
-    expect(toggleButtonThree).not.toHaveFocus()
-
-    // Check state after click
-    userEvent.click(toggleButtonOne)
-    expect(toggleButtonOne).toHaveFocus()
-    expect(toggleButtonTwo).not.toHaveFocus()
-
-    // Check state after keyboard tab
-    userEvent.tab()
-    expect(toggleButtonOne).not.toHaveFocus()
-    expect(toggleButtonTwo).toHaveFocus()
-    expect(toggleButtonThree).not.toHaveFocus()
-
-    // Confirm disabled button does not receive focus
-    userEvent.tab()
-    expect(toggleButtonThree).not.toHaveFocus()
-  })
-})

package/src/lib/components/atoms/ToggleButton/ToggleButton.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import MUIToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton'
-
-interface IToggleButtonProps extends ToggleButtonProps {}
-
-export default function ToggleButton ({ ...rest }: IToggleButtonProps): JSX.Element {
-  return (
-    <MUIToggleButton {...rest} />
-  )
-}