@learningpool/ui 1.6.3 → 1.6.6

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} />
-  )
-}

package/src/lib/components/datadisplay/Avatar/Avatar.test.tsx

@@ -1,187 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react'
-import { cleanup, render, screen } from '@testing-library/react'
-import { Avatar, AvatarGroup } from '../../../../lib/'
-import FolderIcon from '@mui/icons-material/Folder'
-// import logoImage from '../../../../lib/assets/avatar-1.jpg'
-
-// 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 -- Avatar component', () => {
-  it('renders a Avatar', () => {
-    render(<Avatar data-testid="AvatarTest">LP</Avatar>)
-
-    expect(screen.getByTestId('AvatarTest')).toMatchInlineSnapshot(`
-      <div
-        class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-1hhrmaj-MuiAvatar-root"
-        data-testid="AvatarTest"
-      >
-        LP
-      </div>
-    `)
-  })
-
-  it('renders a group of avatars', () => {
-    render(
-      <AvatarGroup data-testid="AvatarTest">
-        <Avatar>RD</Avatar>
-        <Avatar>NS</Avatar>
-        <Avatar>AM</Avatar>
-      </AvatarGroup>
-    )
-
-    expect(screen.getByTestId('AvatarTest')).toMatchInlineSnapshot(`
-      <div
-        class="MuiAvatarGroup-root css-1ytufz-MuiAvatarGroup-root"
-        data-testid="AvatarTest"
-      >
-        <div
-          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-1hhrmaj-MuiAvatar-root"
-        >
-          AM
-        </div>
-        <div
-          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-1hhrmaj-MuiAvatar-root"
-        >
-          NS
-        </div>
-        <div
-          class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault MuiAvatarGroup-avatar css-1hhrmaj-MuiAvatar-root"
-        >
-          RD
-        </div>
-      </div>
-    `)
-  })
-
-  it('displays the correct number of avatars in a group', () => {
-    render(
-      <AvatarGroup data-testid="AvatarTest" total={10}>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-        <Avatar>LP</Avatar>
-      </AvatarGroup>
-    )
-
-    const el = screen.getByText(/6/i)
-    expect(el).toBeInTheDocument()
-  })
-
-  it('limits the number of avatars in a group', () => {
-    render(
-      <AvatarGroup max={3}>
-        <Avatar>RD</Avatar>
-        <Avatar>NS</Avatar>
-        <Avatar>AM</Avatar>
-        <Avatar>KW</Avatar>
-        <Avatar>DD</Avatar>
-        <Avatar>NT</Avatar>
-      </AvatarGroup>
-    )
-
-    const el = screen.getByText(/4/i)
-    expect(el).toBeInTheDocument()
-  })
-
-  it('renders the correct initials', () => {
-    render(<Avatar data-testid="AvatarTest">LP</Avatar>)
-
-    const el = screen.getByText('LP')
-    expect(el).toBeInTheDocument()
-  })
-
-  it('has an accessibile description', () => {
-    render(
-      <Avatar data-testid="AvatarTest" aria-label="Label">
-        LP
-      </Avatar>
-    )
-
-    const el = screen.getByTestId('AvatarTest')
-    expect(el).toHaveAttribute('aria-label', 'Label')
-  })
-
-  it('changes size', () => {
-    render(
-      <Avatar data-testid="AvatarTest" sx={{ width: 100, height: 100 }}>
-        LP
-      </Avatar>
-    )
-
-    const el = screen.getByTestId('AvatarTest')
-    expect(el).toHaveStyle('width: 100px')
-    expect(el).toHaveStyle('height: 100px')
-  })
-
-  it('renders an icon', () => {
-    render(
-      <Avatar>
-        <FolderIcon />
-      </Avatar>
-    )
-
-    const el = screen.getByTestId('FolderIcon')
-    expect(el).toBeInTheDocument()
-  })
-
-  it('automatically sets the text color', () => {
-    render(
-      <>
-        <Avatar data-testid="AvatarTest1" style={{ backgroundColor: '#000' }}>
-          LP
-        </Avatar>
-        {/* <Avatar data-testid="AvatarTest2" sx={{ bgcolor: '#fff' }}>
-          LP
-        </Avatar> */}
-      </>
-    )
-
-    const black = screen.getByTestId('AvatarTest1')
-
-    expect(screen.getByTestId('AvatarTest1')).toMatchInlineSnapshot(`
-      <div
-        class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-1hhrmaj-MuiAvatar-root"
-        data-testid="AvatarTest1"
-        style="background-color: rgb(0, 0, 0);"
-      >
-        LP
-      </div>
-    `)
-    expect(black).toHaveStyle('color: #fff')
-
-    // const white = screen.getByTestId('AvatarTest2')
-    // expect(screen.getByTestId('AvatarTest2')).toMatchInlineSnapshot(`
-    //   <div
-    //     class="tss-26olqr-root MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault css-ax6k3r-MuiAvatar-root"
-    //     data-testid="AvatarTest2"
-    //   >
-    //     LP
-    //   </div>
-    // `)
-    // expect(white).toHaveStyle('color: rgba(0, 0, 0, 0.87)')
-  })
-
-  it('properly renders a fallback image', () => {
-    render(
-      <Avatar
-        data-testid="AvatarTest"
-        src="https://source.unsplash.com/cUgSz7nO_RY"
-      />
-    )
-
-    const el = screen.getByTestId('AvatarTest')
-    expect(el).toBeInTheDocument()
-  })
-})

package/src/lib/components/datadisplay/Avatar/Avatar.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import MUIAvatar, { AvatarProps } from '@mui/material/Avatar'
-import GlobalStyles from '@mui/material/GlobalStyles'
-import { styled } from '@mui/material/styles'
-
-const StyledAvatar = styled(MUIAvatar, { shouldForwardProp: (prop) => prop !== 'sx' })<{
-  sx?: any
-}>(({ theme, sx }) => ({
-  backgroundColor: sx?.bgcolor
-    ? sx.bgcolor
-    : theme.palette.primary.main,
-  color: sx?.bgcolor
-    ? sx.color ?? theme.palette.getContrastText(sx.bgcolor)
-    : theme.palette.primary.contrastText,
-  fontSize: '0.9rem',
-  textTransform: 'uppercase'
-}))
-
-const Avatar = (
-  props: AvatarProps | any
-): React.ReactElement => (
-  <>
-    <GlobalStyles
-      styles={{
-        '.MuiAvatarGroup-root .MuiAvatar-root:first-of-type': {
-          backgroundColor: '#eee',
-          color: '#333'
-        }
-      }}
-    />
-    <StyledAvatar {...props} />
-  </>
-)
-
-export default Avatar