@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/Modal/tests/Modal.test.jsx

@@ -1,261 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import Modal from '..';
-import { Button } from '../..';
-import Variant from '../../utils/constants';
-
-const modalOpen = (isOpen, container) => {
-  if (!isOpen) {
-    expect(container.getByTestId('modal').classList).not.toContain('d-block');
-    expect(container.getByTestId('modal').classList).not.toContain('show');
-    expect(container.getByTestId('modal').classList).toContain('fade');
-    expect(container.queryByTestId('modal-backdrop').classList).not.toContain('modal-backdrop');
-  } else {
-    expect(container.getByTestId('modal').classList).toContain('d-block');
-    expect(container.getByTestId('modal').classList).toContain('show');
-    expect(container.queryByTestId('modal').classList).not.toContain('fade');
-    expect(container.queryByTestId('modal-backdrop').classList).toContain('modal-backdrop');
-  }
-};
-
-const title = 'Modal title';
-const body = 'Modal body';
-const defaultProps = {
-  title,
-  body,
-  open: true,
-  onClose: () => { },
-};
-const closeText = 'GO AWAY!';
-
-describe('<Modal />', () => {
-  describe('correct rendering', () => {
-    const buttons = [
-      <Button.Deprecated buttonType="primary">Blue button!</Button.Deprecated>,
-      {
-        label: 'Red button!',
-        buttonType: 'danger',
-      },
-      <Button.Deprecated buttonType="success">Green button!</Button.Deprecated>,
-    ];
-
-    it('renders default buttons', () => {
-      render(<Modal {...defaultProps} />);
-      const modalTitle = screen.getByText(title);
-      const modalBody = screen.getByText(body);
-
-      expect(modalTitle).toBeInTheDocument();
-      expect(modalBody).toBeInTheDocument();
-      expect(screen.queryAllByRole('button')).toHaveLength(2);
-    });
-
-    it('renders custom buttons', () => {
-      render(<Modal {...defaultProps} buttons={buttons} />);
-      expect(screen.queryAllByRole('button')).toHaveLength(buttons.length + 2);
-    });
-
-    it('renders Warning Variant', () => {
-      render(
-        <Modal {...defaultProps} variant={{ status: Variant.status.WARNING }} />,
-      );
-
-      const modalBody = screen.getByTestId('modal-body');
-
-      expect(modalBody.firstChild.classList).toContain('container-fluid');
-      expect(screen.getByText(body)).toBeInTheDocument();
-
-      const icon = screen.getByTestId('modal-icon').firstChild;
-      expect(icon.classList).toContain('fa-exclamation-triangle');
-      expect(icon.classList).toContain('fa-3x');
-      expect(icon.classList).toContain('text-warning');
-    });
-
-    it('renders invalid Variant properly', () => {
-      render(<Modal {...defaultProps} variant={{ status: 'foo' }} />);
-      const modalTitle = screen.getByText(title);
-      const modalBody = screen.getByText(body);
-
-      expect(modalTitle).toBeInTheDocument();
-      expect(modalBody).toBeInTheDocument();
-      expect(screen.queryAllByRole('button')).toHaveLength(2);
-    });
-
-    it('render of the header close button is optional', () => {
-      render(<Modal {...defaultProps} renderHeaderCloseButton={false} />);
-      const modalHeaderBtn = screen.queryByTestId('modal-header-btn');
-      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
-
-      expect(modalHeaderBtn).not.toBeInTheDocument();
-      expect(modalFooterBtn).toBeInTheDocument();
-    });
-
-    it('render of the default footer close button is optional', () => {
-      render(<Modal {...defaultProps} renderDefaultCloseButton={false} />);
-      const modalHeaderBtn = screen.getByTestId('modal-header-btn');
-      const modalFooterBtn = screen.queryByTestId('modal-footer-btn');
-
-      expect(modalHeaderBtn).toBeInTheDocument();
-      expect(modalFooterBtn).not.toBeInTheDocument();
-    });
-
-    it('renders custom close button string', () => {
-      render(<Modal {...defaultProps} closeText={closeText} />);
-      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
-      expect(modalFooterBtn).toBeInTheDocument();
-      expect(modalFooterBtn).toHaveTextContent(closeText);
-    });
-
-    it('renders custom close button element', () => {
-      const closeElem = <span className="is-close-text">{closeText}</span>;
-      render(<Modal {...defaultProps} closeText={closeElem} />);
-      const modalFooterBtn = screen.getByTestId('modal-footer-btn');
-
-      expect(modalFooterBtn).toBeInTheDocument();
-      expect(modalFooterBtn.firstChild.classList).toContain('is-close-text');
-      expect(modalFooterBtn.firstChild).toHaveTextContent(closeText);
-    });
-
-    it('renders with IE11-specific styling when IE11 is detected', () => {
-      const { MSInputMethodContext } = global;
-      const { documentMode } = global.document;
-
-      // mimic IE11
-      global.MSInputMethodContext = true;
-      global.document.documentMode = true;
-      render(<Modal {...defaultProps} />);
-      const modal = screen.queryByTestId('modal');
-      expect(modal.classList).toContain('is-ie11');
-
-      global.MSInputMethodContext = MSInputMethodContext;
-      global.document.documentMode = documentMode;
-    });
-
-    it('renders without IE11-specific styling when IE11 is not detected', () => {
-      const { MSInputMethodContext } = global;
-      const { documentMode } = global.document;
-
-      // mimic non-IE11 browser
-      global.MSInputMethodContext = false;
-      global.document.documentMode = false;
-      render(<Modal {...defaultProps} />);
-      const modal = screen.queryByTestId('modal');
-      expect(modal).not.toContain('is-ie11');
-
-      global.MSInputMethodContext = MSInputMethodContext;
-      global.document.documentMode = documentMode;
-    });
-  });
-
-  describe('props received correctly', () => {
-    it('component receives props', () => {
-      const { rerender } = render(<Modal {...defaultProps} open={false} />);
-
-      modalOpen(false, screen);
-      rerender(<Modal {...defaultProps} open />);
-      modalOpen(true, screen);
-    });
-
-    it('component receives props and ignores prop change', () => {
-      const { rerender } = render(<Modal {...defaultProps} />);
-
-      modalOpen(true, screen);
-      rerender(<Modal {...defaultProps} title="Changed modal title" />);
-      modalOpen(true, screen);
-    });
-
-    it('throws an error when an invalid parentSelector prop is passed', () => {
-      expect(() => render(
-        <Modal
-          {...defaultProps}
-          parentSelector=".this-selector-does-not-exist"
-        />,
-      )).toThrow('Modal received invalid parentSelector: .this-selector-does-not-exist, no matching element found');
-    });
-  });
-
-  describe('close functions properly', () => {
-    it('closes when x button pressed', async () => {
-      render(<Modal {...defaultProps} />);
-
-      modalOpen(true, screen);
-      await userEvent.click(screen.queryAllByRole('button')[0]);
-      modalOpen(false, screen);
-    });
-
-    it('closes when Close button pressed', async () => {
-      render(<Modal {...defaultProps} />);
-
-      modalOpen(true, screen);
-      await userEvent.click(screen.queryAllByRole('button')[1]);
-      modalOpen(false, screen);
-    });
-
-    it('calls callback function on close', async () => {
-      const spy = jest.fn();
-      render(<Modal {...defaultProps} onClose={spy} />);
-
-      expect(spy).toHaveBeenCalledTimes(0);
-
-      // press X button
-      await userEvent.click(screen.queryAllByRole('button')[0]);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-
-    it('reopens after closed', async () => {
-      const { rerender } = render(<Modal {...defaultProps} />);
-
-      modalOpen(true, screen);
-      await userEvent.click(screen.queryAllByRole('button')[0]);
-      modalOpen(false, screen);
-      rerender(<Modal {...defaultProps} open />);
-      modalOpen(true, screen);
-    });
-  });
-
-  describe('focus changes correctly', () => {
-    it('has correct initial focus', () => {
-      render(<Modal {...defaultProps} />);
-      const buttons = screen.queryAllByRole('button');
-      expect(buttons[0]).toHaveFocus();
-    });
-
-    it('has reset focus after close and reopen', () => {
-      const { rerender } = render(<Modal {...defaultProps} />);
-      const buttons = screen.queryAllByRole('button');
-      expect(buttons[0]).toHaveFocus();
-      rerender(<Modal {...defaultProps} open={false} />);
-      modalOpen(false, screen);
-      rerender(<Modal {...defaultProps} open />);
-      modalOpen(true, screen);
-      expect(buttons[0]).toHaveFocus();
-    });
-
-    it('has focus on input in modal body', () => {
-      const { getByTestId } = render(
-        <Modal
-          {...defaultProps}
-          open
-          renderDefaultCloseButton={false}
-          renderHeaderCloseButton={false}
-          body={<div><input data-testid="modal-input" /></div>}
-        />,
-      );
-      const input = getByTestId('modal-input');
-      expect(input).toHaveFocus();
-    });
-
-    it('has focus on `.modal-content` when nothing else is tabbable', () => {
-      const { getByTestId } = render(
-        <Modal
-          {...defaultProps}
-          renderDefaultCloseButton={false}
-          renderHeaderCloseButton={false}
-        />,
-      );
-      const modalContent = getByTestId('modal-content');
-      expect(modalContent).toHaveFocus();
-    });
-  });
-});

package/src/Nav/_variables.scss

@@ -1,58 +0,0 @@
-// Navs
-
-$nav-link-padding-y:                               .5rem !default;
-$nav-link-padding-x:                               1rem !default;
-$nav-link-color:                                   $gray-700 !default;
-$nav-link-disabled-color:                          $gray-300 !default;
-$nav-link-font-weight:                             500 !default;
-
-$nav-tabs-border-color:                            $light-400 !default;
-$nav-tabs-border-width:                            2px !default;
-$nav-tabs-border-radius:                           0 !default;
-$nav-tabs-hover-bg:                                transparent !default;
-$nav-tabs-focus-border-color:                      $nav-tabs-hover-bg !default;
-$nav-tabs-disabled-bg:                             $nav-tabs-hover-bg !default;
-$nav-tabs-link-hover-border-color:                 transparent transparent $nav-tabs-border-color !default;
-$nav-tabs-link-hover-bg:                           $light-400 !default;
-$nav-tabs-link-active-color:                       $primary-500 !default;
-$nav-tabs-link-active-border-color:                $nav-tabs-link-active-color !default;
-$nav-tabs-link-active-bg:                          transparent !default;
-$nav-tabs-link-focus-border-color:                 $nav-tabs-link-active-color !default;
-$nav-tabs-link-distance-to-border:                 4px !default;
-$nav-tabs-link-border-color:                       transparent !default;
-$nav-tabs-link-disabled-border-color:              $nav-tabs-link-border-color !default;
-
-$nav-pills-border-radius:                          $border-radius !default;
-$nav-pills-link-active-color:                      $component-active-color !default;
-$nav-pills-link-active-bg:                         $component-active-bg !default;
-$nav-pills-link-active-border-color:               $white !default;
-$nav-pills-link-border-color:                      $nav-tabs-border-color !default;
-$nav-pills-link-border-width:                      1px !default;
-
-$nav-inverse-pills-link-color:                     $white !default;
-$nav-inverse-pills-link-border-color:              $dark-300 !default;
-$nav-inverse-pills-link-hover-bg:                  $nav-inverse-pills-link-border-color !default;
-$nav-inverse-pills-link-focus-color:               $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-bg:                 $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-color:              $primary-500 !default;
-$nav-inverse-pills-link-active-border-color:       $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-hover-bg:           $nav-inverse-pills-link-border-color !default;
-$nav-inverse-pills-link-active-hover-color:        $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-hover-border-color: $nav-inverse-pills-link-border-color !default;
-$nav-inverse-pills-link-active-focus-hover-bg:     $nav-inverse-pills-link-color !default;
-$nav-inverse-pills-link-active-focus-color:        $nav-inverse-pills-link-active-color !default;
-$nav-inverse-pills-link-active-focus-border-color: $primary !default;
-$nav-inverse-pills-link-active-focus-hover-border-color: $nav-inverse-pills-link-active-focus-border-color !default;
-$nav-inverse-pills-link-border-width:              $nav-pills-link-border-width !default;
-$nav-inverse-pills-tab-content-color:              $nav-inverse-pills-link-color !default;
-
-$nav-inverse-tabs-link-color:                      $white !default;
-$nav-inverse-tabs-link-border-bottom-color:        $dark-300 !default;
-$nav-inverse-tabs-link-hover-bg:                   $nav-inverse-tabs-link-border-bottom-color !default;
-$nav-inverse-tabs-link-active-hover-bg:            transparent !default;
-$nav-inverse-tabs-link-focus-bg:                   $nav-inverse-tabs-link-color !default;
-$nav-inverse-tabs-link-active-border-color:        $nav-inverse-tabs-link-color !default;
-$nav-inverse-tabs-link-active-bg:                  $nav-inverse-tabs-link-hover-bg !default;
-$nav-inverse-tabs-link-active-border-bottom-width: $nav-tabs-border-width !default;
-$nav-inverse-tabs-tab-content-color:               $nav-inverse-tabs-link-color !default;
-$nav-inverse-tabs-dropdown-border-color:           $nav-inverse-tabs-link-active-hover-bg !default;

package/src/Navbar/_variables.scss

@@ -1,40 +0,0 @@
-// Navbar
-
-$navbar-padding-y:                  calc($spacer / 2) !default;
-$navbar-padding-x:                  $spacer !default;
-
-$navbar-nav-link-padding-x:         .5rem !default;
-
-$navbar-brand-font-size:            $font-size-lg !default;
-
-// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-// The default for $nav-link-padding-y is .5rem. Copied here for modularization
-$nav-link-height:                   $font-size-base * $line-height-base + .5rem * 2 !default;
-$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y:            calc(($nav-link-height - $navbar-brand-height) / 2) !default;
-
-$navbar-toggler-padding-y:          .25rem !default;
-$navbar-toggler-padding-x:          .75rem !default;
-$navbar-toggler-font-size:          $font-size-lg !default;
-$navbar-toggler-border-radius:      $btn-border-radius !default;
-
-$navbar-nav-scroll-max-height:      75vh !default;
-
-$navbar-dark-color:                 rgba($white, .5) !default;
-$navbar-dark-hover-color:           rgba($white, .75) !default;
-$navbar-dark-active-color:          $white !default;
-$navbar-dark-disabled-color:        rgba($white, .25) !default;
-$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
-$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
-
-$navbar-light-color:                rgba($black, .5) !default;
-$navbar-light-hover-color:          rgba($black, .7) !default;
-$navbar-light-active-color:         rgba($black, .9) !default;
-$navbar-light-disabled-color:       rgba($black, .3) !default;
-$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
-$navbar-light-toggler-border-color: rgba($black, .1) !default;
-
-$navbar-light-brand-color:                $navbar-light-active-color !default;
-$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
-$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
-$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;

package/src/OverflowScroll/_variables.scss

@@ -1,5 +0,0 @@
-.pgn__overflow-scroll-overflow-container {
-  --pgn-overflow-scroll-opacity-mask-transparent: rgba(0, 0, 0, .4);
-}
-
-$overflow-scroll-opacity-mask-transparent: var(--pgn-overflow-scroll-opacity-mask-transparent) !default;

package/src/OverflowScroll/index.scss

@@ -1 +0,0 @@
-@import "variables";

package/src/Pagination/_variables.scss

@@ -1,19 +0,0 @@
-// Pagination
-
-$pagination-padding-y:              .625rem !default;
-$pagination-margin-x:               .5rem !default;
-$pagination-line-height:            1.5rem !default;
-$pagination-font-size-sm:           .875rem !default;
-
-$pagination-icon-width:             2.25rem !default;
-$pagination-icon-height:            2.25rem !default;
-$pagination-toggle-border:          .3125rem !default;
-$pagination-toggle-border-sm:       .25rem !default;
-$pagination-secondary-height:       2.75rem !default;
-$pagination-secondary-height-sm:    2.25rem !default;
-
-$pagination-dropdown-color-inverse: $white !default;
-$pagination-border-width:           $border-width !default;
-
-$pagination-reduced-dropdown-max-height: 60vh !default;
-$pagination-reduced-dropdown-min-width: 6rem !default;

package/src/Popover/_variables.scss

@@ -1,36 +0,0 @@
-// Popovers
-
-$popover-font-size:                 $font-size-sm !default;
-$popover-bg:                        $white !default;
-$popover-max-width:                 480px !default;
-$popover-border-width:              $border-width !default;
-$popover-border-color:              rgba($black, .2) !default;
-$popover-border-radius:             $border-radius-sm !default;
-$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
-$popover-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
-$popover-icon-margin-right:         .5rem;
-$popover-icon-height:               1rem;
-$popover-icon-width:                1rem;
-
-$popover-header-bg:                 $white !default;
-$popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          .5rem !default;
-$popover-header-padding-x:          1rem !default;
-
-$popover-body-color:                $body-color !default;
-$popover-body-padding-y:            $popover-header-padding-y !default;
-$popover-body-padding-x:            $popover-header-padding-x !default;
-
-$popover-arrow-width:               1rem !default;
-$popover-arrow-height:              .5rem !default;
-$popover-arrow-color:               $popover-bg !default;
-
-$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
-
-$popover-success-bg:                $success-100 !default;
-$popover-success-icon-color:        $success-500 !default;
-$popover-warning-bg:                $warning-100 !default;
-$popover-warning-icon-color:        $warning-500 !default;
-$popover-danger-bg:                 $danger-100 !default;
-$popover-danger-icon-color:         $danger-500 !default;

package/src/ProductTour/_variables.scss

@@ -1,15 +0,0 @@
-// Checkpoints
-
-$checkpoint-background-color:       $light-300 !default;
-
-$checkpoint-body-color:             $gray-700;
-
-$checkpoint-border-color:           $brand !default;
-$checkpoint-border-width:           8px !default;
-
-$checkpoint-breadcrumb-color:       $primary !default;
-
-$checkpoint-arrow-width:            15px !default;
-$checkpoint-max-width:              480px !default;
-
-$checkpoint-z-index:                1060 !default;

package/src/ProgressBar/_variables.scss

@@ -1,23 +0,0 @@
-// Progress bars
-
-$progress-height:                   1rem !default;
-$annotated-progress-height:         .3125rem !default;
-$progress-font-size:                $font-size-base * .75 !default;
-$progress-bg:                       transparent !default;
-$progress-border-radius:            0 !default;
-$progress-box-shadow:               none !default;
-$progress-bar-color:                $white !default;
-$progress-bar-bg:                   theme-color("accent-a") !default;
-$annotated-progress-bar-bg:         theme-color("dark") !default;
-$progress-bar-animation-timing:     1s linear infinite !default;
-$progress-bar-transition:           width .6s ease !default;
-$progress-bar-border-width:         1px !default;
-$progress-bar-border-color:         $gray-500 !default;
-$progress-threshold-circle:         .5625rem !default;
-$progress-hint-annotation-gap:      .5rem !default;
-$progress-colors: (
-  "dark":    $primary-500,
-  "success": $success-500,
-  "error":   $danger-500,
-  "warning": $accent-b,
-) !default;

package/src/RadioButtonGroup/README.md

@@ -1,50 +0,0 @@
----
-title: 'RadioButtonGroup'
-type: 'component'
-components:
-- RadioButtonGroup
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'To Do'
-devStatus: 'To Do'
-notes: |
-  Replaced by Form.Radio and From.RadioSet
----
-
-## Unselected minimal usage
-
-```jsx live
-<RadioButtonGroup
-  name="rbg"
-  label="Radio Button Group"
-  onBlur={() => console.log('blurred')}
-  onChange={() => console.log('onChange')}
-  onClick={() => console.log('onClick')}
-  onFocus={() => console.log('onFocus')}
-  onKeyDown={() => console.log('onKeyDown')}
->
-  <RadioButton value="jaebaebae">First Value</RadioButton>
-  <RadioButton value="value2">Second Value</RadioButton>
-  <RadioButton value="value3">Third Value</RadioButton>
-</RadioButtonGroup>
-```
-
-## Selected minimal usage
-
-```jsx live
-<RadioButtonGroup
-  name="rbg-2"
-  label="Radio Button Group"
-  onBlur={() => console.log('blurred')}
-  onChange={() => console.log('onChange')}
-  onClick={() => console.log('onClick')}
-  onFocus={() => console.log('onFocus')}
-  onKeyDown={() => console.log('onKeyDown')}
-  selectedIndex={1}
->
-  <RadioButton value="jaebaebae">First Value</RadioButton>
-  <RadioButton value="value2">Second Value</RadioButton>
-  <RadioButton value="value3">Third Value</RadioButton>
-</RadioButtonGroup>
-```

package/src/RadioButtonGroup/RadioButtonGroup.test.jsx

@@ -1,127 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import RadioButtonGroup, { RadioButton } from '.';
-
-describe('<RadioButton />', () => {
-  const text = 'text';
-  const index = 0;
-  const isChecked = false;
-  const name = 'name';
-  const onBlur = jest.fn();
-  const onClick = jest.fn();
-  const onFocus = jest.fn();
-  const onKeyDown = jest.fn();
-  const value = 'value';
-  const props = {
-    index,
-    isChecked,
-    name,
-    onBlur,
-    onClick,
-    onFocus,
-    onKeyDown,
-    value,
-  };
-  describe('correct rendering', () => {
-    it('renders RadioButton', () => {
-      render(
-        <RadioButton {...props}>
-          {text}
-        </RadioButton>,
-      );
-
-      const radioButton = screen.getByRole('radio');
-      expect(radioButton).toBeInTheDocument();
-      expect(radioButton).toHaveAttribute('name', name);
-      expect(radioButton).toHaveAttribute('value', value);
-      expect(radioButton).toHaveAttribute('aria-checked', isChecked.toString());
-      expect(radioButton).toHaveAttribute('data-index', index.toString());
-    });
-  });
-
-  describe('event handlers correctly triggered', () => {
-    let spy;
-
-    beforeEach(() => {
-      spy = jest.fn();
-    });
-
-    afterEach(() => {
-      spy.mockClear();
-    });
-
-    it('should fire onBlur', async () => {
-      render((<RadioButton {...props} onBlur={spy} />));
-      const radioButton = screen.getByRole('radio');
-      radioButton.focus();
-      await userEvent.tab();
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-    it('should fire onClick', async () => {
-      render((<RadioButton {...props} onClick={spy} />));
-      const radioButton = screen.getByRole('radio');
-      await userEvent.click(radioButton);
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-    it('should fire onFocus', async () => {
-      render((<RadioButton {...props} onFocus={spy} />));
-      const radioButton = screen.getByRole('radio');
-      radioButton.focus();
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-    it('should fire onKeyDown', async () => {
-      render((<RadioButton {...props} onKeyDown={spy} />));
-      const radioButton = screen.getByRole('radio');
-      radioButton.focus();
-      await userEvent.keyboard('{enter}');
-      expect(spy).toHaveBeenCalledTimes(1);
-    });
-  });
-});
-
-describe('<RadioButtonGroup />', () => {
-  const firstText = 'firstText';
-  const secondText = 'secondText';
-  const name = 'name';
-  const label = 'label';
-  const onBlur = jest.fn();
-  const onChange = jest.fn();
-  const onClick = jest.fn();
-  const onFocus = jest.fn();
-  const onKeyDown = jest.fn();
-  const firstValue = 'firstValue';
-  const secondValue = 'secondValue';
-  const props = {
-    name,
-    label,
-    onBlur,
-    onChange,
-    onClick,
-    onFocus,
-    onKeyDown,
-  };
-
-  it('renders RadioButtonGroup', () => {
-    render(
-      <RadioButtonGroup {...props}>
-        <RadioButton value={firstValue}>{firstText}</RadioButton>
-        <RadioButton value={secondValue}>{secondText}</RadioButton>
-      </RadioButtonGroup>,
-    );
-
-    const radioButtons = screen.getAllByRole('radio');
-    expect(radioButtons.length).toBe(2);
-
-    radioButtons.forEach((radioButton, index) => {
-      expect(radioButton).toHaveAttribute('name', name);
-      expect(radioButton).toHaveAttribute('value', index === 0 ? firstValue : secondValue);
-    });
-
-    const radioButtonGroupDiv = screen.getByRole('radiogroup');
-    expect(radioButtonGroupDiv).toBeInTheDocument();
-    expect(radioButtonGroupDiv).toHaveAttribute('aria-label', label);
-    expect(radioButtonGroupDiv).toHaveAttribute('tabIndex', '-1');
-  });
-});