@openedx/paragon 22.4.0 → 23.0.0-alpha.1

package/scss/core/core.scss

@@ -1,21 +0,0 @@
-@import "functions";
-@import "variables";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "typography";
-@import "grid";
-// The react-loading-skeleton package.json defines an 'exports' field which specifies a '.css'
-// extension on this export.  Without the '.css' on the end of this line, webpack can't find the file
-// and the build fails.
-// See https://webpack.js.org/guides/package-exports/ for more information on how webpack uses
-// the 'exports' field.
-@import "~react-loading-skeleton/dist/skeleton.css";
-@import "~bootstrap/scss/transitions";
-@import "utilities";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/print";
-
-// Paragon components
-@import "../../src/index";

package/src/ActionRow/_variables.scss

@@ -1,2 +0,0 @@
-$action-row-gap-x:                   .5rem !default;
-$action-row-gap-y:                   .5rem !default;

package/src/Alert/_variables.scss

@@ -1,24 +0,0 @@
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-$alert-padding-y:                   1.5rem !default;
-$alert-padding-x:                   1.5rem !default;
-$alert-margin-bottom:               1rem !default;
-$alert-border-radius:               $border-radius !default;
-$alert-link-font-weight:            $font-weight-normal !default;
-$alert-border-width:                0 !default;
-$alert-title-color:                 #000000 !default;
-$alert-box-shadow:                  0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15) !default;
-
-$alert-bg-level:                    -10 !default;
-$alert-border-level:                -9 !default;
-$alert-color-level:                 6 !default;
-
-$alert-icon-space:                  .8rem !default;
-
-$alert-font-size:                   .875rem !default;
-$alert-line-height:                 1.5rem !default;
-$alert-content-color:               $gray-700 !default;
-
-$alert-actions-gap:                 map-get($spacers, 3);

package/src/Annotation/_variables.scss

@@ -1,18 +0,0 @@
-$annotation-padding:               .5rem !default;
-$annotation-box-shadow:            drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
-  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
-$annotation-border-radius:         .25rem !default;
-$annotation-max-width:             18.75rem !default;
-$annotation-font-size:             $font-size-sm !default;
-$annotation-line-height:           $line-height-sm !default;
-
-$annotation-variants: (
-  "success": ( "background-color": $success, "color": $white ),
-  "warning": ( "background-color": $accent-b, "color": $black ),
-  "error":   ( "background-color": $danger, "color": $white ),
-  "light":   ( "background-color": $white, "color": $primary-500 ),
-  "dark":    ( "background-color": $dark, "color": $white ),
-) !default;
-
-$annotation-arrow-side-margin:     .25rem !default;
-$annotation-arrow-border-width:    .5rem !default;

package/src/Avatar/_variables.scss

@@ -1,10 +0,0 @@
-$avatar-border-radius:               100% !default;
-$avatar-border:                      solid 1px $light-300 !default;
-
-$avatar-size-xs:                     1.5rem !default;
-$avatar-size-sm:                     2.25rem !default;
-$avatar-size:                        3rem !default;
-$avatar-size-lg:                     4rem !default;
-$avatar-size-xl:                     6rem !default;
-$avatar-size-xxl:                    11.5rem !default;
-$avatar-size-huge:                   18.75rem !default;

package/src/AvatarButton/_variables.scss

@@ -1,3 +0,0 @@
-$avatar-button-padding-left: .25em !default;
-$avatar-button-padding-left-sm: .25em !default;
-$avatar-button-padding-left-lg: .25em !default;

package/src/Badge/_variables.scss

@@ -1,16 +0,0 @@
-// Badges
-
-$badge-font-size:                   75% !default;
-$badge-font-weight:                 $font-weight-bold !default;
-$badge-padding-y:                   .125rem !default;
-$badge-padding-x:                   .5rem !default;
-$badge-border-radius:               .25rem !default;
-
-$badge-transition:                  none !default;
-$badge-focus-width:                 $input-btn-focus-width !default;
-
-$badge-pill-padding-x:              .6em !default;
-
-// Use a higher than normal value to ensure completely rounded edges when
-// customizing padding or font-size on labels.
-$badge-pill-border-radius:          10rem !default;

package/src/Breadcrumb/_variables.scss

@@ -1,27 +0,0 @@
-// Breadcrumbs
-
-$breadcrumb-font-size:              null !default;
-
-$breadcrumb-padding-y:              .75rem !default;
-$breadcrumb-padding-x:              1rem !default;
-$breadcrumb-item-padding:           .5rem !default;
-
-$breadcrumb-margin-bottom:          1rem !default;
-$breadcrumb-margin-left:           .5rem !default;
-
-$breadcrumb-border-focus-axis-x:    .25rem !default;
-$breadcrumb-border-focus-axis-y:    .5rem !default;
-
-$breadcrumb-border-focus-width:     .0625rem !default;
-
-$breadcrumb-bg:                     $gray-200 !default;
-$breadcrumb-divider-color:          $gray-600 !default;
-$breadcrumb-active-color:           $gray-500 !default;
-$breadcrumb-inverse-active:         $light-500 !default;
-$breadcrumb-inverse-spacer:         $light-700 !default;
-$breadcrumb-color:                  $primary-500 !default;
-$breadcrumb-inverse-color:          $white !default;
-$breadcrumb-divider:                "/" !default;
-
-$breadcrumb-border-radius:          $border-radius !default;
-$breadcrumb-focus-border-radius:          .125rem !default;

package/src/Bubble/_variables.scss

@@ -1,8 +0,0 @@
-$bubble-variants: (
-  "success":    ( "background-color": $success, "color": $white ),
-  "warning":    ( "background-color": $warning, "color": $white ),
-  "error":      ( "background-color": $danger, "color": $white ),
-  "primary":    ( "background-color": $primary, "color": $white ),
-) !default;
-$bubble-expandable-padding-x:              .25rem !default;
-$bubble-expandable-padding-y:              0 !default;

package/src/Button/_variables.scss

@@ -1,52 +0,0 @@
-$btn-padding-y:               $input-btn-padding-y !default;
-$btn-padding-x:               $input-btn-padding-x !default;
-$btn-font-family:             $input-btn-font-family !default;
-$btn-font-size:               $input-btn-font-size !default;
-$btn-line-height:             $input-btn-line-height !default;
-
-$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
-$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
-$btn-font-size-sm:            $input-btn-font-size-sm !default;
-$btn-line-height-sm:          $input-btn-line-height-sm !default;
-
-$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
-$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
-$btn-font-size-lg:            $input-btn-font-size-lg !default;
-$btn-line-height-lg:          $input-btn-line-height-lg !default;
-
-$btn-border-width:            $input-btn-border-width !default;
-
-$btn-font-weight:             $font-weight-normal !default;
-$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
-$btn-focus-width:             2px !default;
-$btn-focus-gap:               $btn-focus-width !default;
-$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
-$btn-disabled-opacity:        .65 !default;
-$btn-active-box-shadow:       none;
-
-$btn-tertiary-color:          $gray-700 !default;
-$btn-tertiary-bg:             transparent !default;
-$btn-tertiary-hover-bg:       $light-500 !default;
-$btn-tertiary-active-bg:      $light-500 !default;
-$btn-inverse-tertiary-color:          $white !default;
-$btn-inverse-tertiary-bg:             transparent !default;
-$btn-inverse-tertiary-hover-bg:       rgba(255, 255, 255, .1) !default;
-$btn-inverse-tertiary-active-bg:      rgba(255, 255, 255, .1) !default;
-
-$btn-link-disabled-color:     theme-color("gray", "light-text") !default;
-
-$btn-block-spacing-y:         .5rem !default;
-
-// Allows for customizing button radius independently from global border radius
-$btn-border-radius:           $border-radius !default;
-$btn-border-radius-lg:        $border-radius-lg !default;
-$btn-border-radius-sm:        $border-radius-sm !default;
-
-$btn-transition: null;
-
-$btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
-$btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
-
-$btn-focus-border-radius: calc(#{$btn-border-radius} + #{$btn-focus-border-gap}) !default;
-$btn-focus-border-radius-lg: $btn-focus-border-radius !default;
-$btn-focus-border-radius-sm: $btn-border-radius !default;

package/src/Button/deprecated/Button.test.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Button from '.';
-
-const defaultProps = {
-  label: 'Click me!',
-};
-
-describe('<Button />', () => {
-  it('renders', () => {
-    const { getByText } = render(<Button {...defaultProps} />);
-    const button = getByText(defaultProps.label);
-    expect(button).toBeInTheDocument();
-  });
-
-  it('puts focus on button on click', () => {
-    const { getByText } = render(<Button {...defaultProps} />);
-    const button = getByText(defaultProps.label);
-
-    expect(button).not.toHaveFocus();
-    userEvent.click(button);
-    expect(button).toHaveFocus();
-  });
-
-  it('calls onClick prop on click', () => {
-    const onClickSpy = jest.fn();
-    const { getByText } = render(<Button {...defaultProps} onClick={onClickSpy} />);
-    const button = getByText(defaultProps.label);
-
-    userEvent.click(button);
-    expect(onClickSpy).toHaveBeenCalledTimes(1);
-  });
-});

package/src/Button/deprecated/index.jsx

@@ -1,145 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import withDeprecatedProps, { DeprTypes } from '../../withDeprecatedProps';
-
-class DeprecatedButton extends React.Component {
-  constructor(props) {
-    super(props);
-
-    const {
-      onBlur,
-      onKeyDown,
-    } = props;
-
-    this.onBlur = onBlur.bind(this);
-    this.onKeyDown = onKeyDown.bind(this);
-    this.onClick = this.onClick.bind(this);
-    this.setRefs = this.setRefs.bind(this);
-  }
-
-  /*
-    The button component is given focus explicitly in its onClick to account
-    for the fact that an HTML <button> element in Firefox and Safari does not get
-    focus on onClick.
-
-    See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button.
-  */
-  onClick(e) {
-    this.buttonRef.focus();
-    this.props.onClick(e);
-  }
-
-  /*
-    The button component needs a ref to itself to be able to force
-    focus in its onClick function (buttonRef). It also needs to accept
-    a callback function from parent components to give those parents
-    a reference to their child button (e.g. for the modal component).
-    Therefore, both have been wrapped in a function bound on the class,
-    since one cannot set two ref attributes on a component.
-  */
-  setRefs(input) {
-    this.buttonRef = input;
-    this.props.inputRef(input);
-  }
-
-  render() {
-    const {
-      buttonType,
-      className,
-      children,
-      isClose,
-      type,
-      /* inputRef is not used directly in the render, but it needs to be assigned
-        here to prevent it from being passed to the HTML button component as part
-        of other.
-      */
-      inputRef,
-      ...other
-    } = this.props;
-
-    return (
-      <button
-        {...other}
-        className={classNames([
-          'btn',
-          className,
-        ], {
-          [`btn-${buttonType}`]: buttonType !== undefined,
-        }, {
-          close: isClose,
-        })}
-        onBlur={this.onBlur}
-        onClick={this.onClick}
-        onKeyDown={this.onKeyDown}
-        // eslint-disable-next-line react/button-has-type
-        type={type}
-        ref={this.setRefs}
-
-      >
-        {children}
-      </button>
-    );
-  }
-}
-
-export const buttonPropTypes = {
-  /** Used to determine the type of button to be rendered.  See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable button types. For example, `buttonType="light"`. The default is `undefined`. */
-  buttonType: PropTypes.string,
-  /** Specifies Bootstrap class names to apply to the button. See [Bootstrap's buttons documentation](https://getbootstrap.com/docs/4.0/components/buttons/) for a list of applicable class names. The default is an empty array. */
-  className: PropTypes.string,
-  /** Specifies the text that is displayed within the button. */
-  children: PropTypes.node.isRequired,
-  // eslint-disable-next-line max-len
-  /** A function that defines a reference for the button. An example `inputRef` from the calling component could look something like: `inputRef={(input) => { this.button = input; }}`. The default is an empty function. */
-  inputRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
-  ]),
-  /** Used to determine if the button is a "Close" style button to leverage bootstrap styling. Example use case is with the Status Alert [dismiss button](https://getbootstrap.com/docs/4.0/components/alerts/#dismissing). The default is false. */
-  isClose: PropTypes.bool,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onBlur` event is triggered. For example, the button could change in color or `buttonType` when focus is changed. The default is an empty function. */
-  onBlur: PropTypes.func,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onClick` event is triggered. For example, the button could launch a `Modal`. The default is an empty function. */
-  onClick: PropTypes.func,
-  // eslint-disable-next-line max-len
-  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.  For example, this could handle using the `Escape` key to trigger the button's action. The default is an empty function. */
-  onKeyDown: PropTypes.func,
-  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */
-  type: PropTypes.string,
-  /** Specifies variant to use. */
-  variant: PropTypes.oneOf([
-    'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link', 'outline-primary',
-    'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light',
-  ]),
-};
-
-DeprecatedButton.propTypes = buttonPropTypes;
-
-DeprecatedButton.defaultProps = {
-  buttonType: undefined,
-  className: undefined,
-  inputRef: () => {},
-  isClose: false,
-  onBlur: () => {},
-  onKeyDown: () => {},
-  onClick: () => {},
-  type: 'button',
-  variant: 'outline-primary',
-};
-
-export default withDeprecatedProps(DeprecatedButton, 'Button', {
-  label: {
-    deprType: DeprTypes.MOVED,
-    newName: 'children',
-  },
-  className: {
-    deprType: DeprTypes.FORMAT,
-    expect: value => typeof value === 'string',
-    transform: value => (Array.isArray(value) ? value.join(' ') : value),
-    message: 'It should be a string.',
-  },
-});

package/src/Card/_variables.scss

@@ -1,55 +0,0 @@
-// Card
-
-$card-spacer-y:                      .75rem !default;
-$card-spacer-x:                      1.25rem !default;
-$card-border-width:                  $border-width !default;
-$card-border-radius:                 $border-radius !default;
-$card-border-color:                  rgba($black, .125) !default;
-$card-border-focus-color:            $primary-500 !default;
-$card-border-focus-color-dark:       theme-color("primary", "focus") !default;
-$card-inner-border-radius:           subtract($card-border-radius, $card-border-width) !default;
-$card-cap-bg:                        rgba($black, .03) !default;
-$card-cap-color:                     null !default;
-$card-height:                        null !default;
-$card-color:                         null !default;
-$card-bg:                            $white !default;
-$card-bg-dark:                       $primary-500 !default;
-$card-bg-muted:                      $light-200 !default;
-
-$card-img-overlay-padding:           1.25rem !default;
-
-$card-group-margin:                  calc($grid-gutter-width / 2) !default;
-$card-deck-margin:                   $card-group-margin !default;
-$card-grid-margin:                   $card-group-margin !default;
-$card-deck-margin-bottom:            map_get($spacers, 3) !default;
-$card-grid-margin-bottom:            map_get($spacers, 3) !default;
-
-$card-columns-count:                 3 !default;
-$card-columns-gap:                   1.25rem !default;
-$card-columns-margin:                $card-spacer-y !default;
-
-$card-divider-bg:                    $light-400 !default;
-
-$card-footer-actions-gap:            .5rem !default;
-
-$card-logo-left-offset:              1.5rem !default;
-$card-logo-bottom-offset:            1rem !default;
-$card-logo-left-offset-horizontal:   .4375rem !default;
-$card-logo-bottom-offset-horizontal: .4375rem !default;
-
-$card-logo-width:                    7.25rem !default;
-$card-logo-height:                   4.125rem !default;
-
-$card-image-border-radius:           $card-border-radius !default;
-$card-logo-border-radius:            .25rem !default;
-
-$card-footer-text-font-size:         $x-small-font-size;
-
-$card-image-horizontal-max-width:    240px !default;
-$card-image-horizontal-min-width:    $card-image-horizontal-max-width !default;
-$card-image-vertical-max-height:     140px !default;
-$loading-skeleton-spacer:            .313rem !default;
-
-$card-focus-border-offset:           5px !default;
-$card-focus-border-width:            2px !default;
-$card-focus-border-radius:           calc($card-focus-border-offset + $card-border-radius) !default;

package/src/Carousel/_variables.scss

@@ -1,27 +0,0 @@
-// Carousel
-
-$carousel-control-color:             $white !default;
-$carousel-control-width:             15% !default;
-$carousel-control-opacity:           .5 !default;
-$carousel-control-hover-opacity:     .9 !default;
-$carousel-control-transition:        opacity .15s ease !default;
-
-$carousel-indicator-width:           30px !default;
-$carousel-indicator-height:          3px !default;
-$carousel-indicator-hit-area-height: 10px !default;
-$carousel-indicator-spacer:          3px !default;
-$carousel-indicator-active-bg:       $white !default;
-$carousel-indicator-transition:      opacity .6s ease !default;
-
-$carousel-caption-width:             70% !default;
-$carousel-caption-color:             $white !default;
-
-$carousel-control-icon-width:        20px !default;
-
-$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
-$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
-
-$carousel-transition-duration:       .6s !default;
-
-// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
-$carousel-transition:                transform $carousel-transition-duration ease-in-out !default;

package/src/CheckBox/CheckBox.test.jsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import CheckBox from '.';
-
-describe('<CheckBox />', () => {
-  it('attributes are set correctly', () => {
-    render(<CheckBox name="checkbox" label="check me out!" />);
-    const checkbox = screen.getByLabelText('check me out!');
-    expect(checkbox).toBeInTheDocument();
-    expect(checkbox).toHaveAttribute('type', 'checkbox');
-    expect(checkbox).not.toBeChecked();
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('aria-label changes after click', async () => {
-    render(<CheckBox name="checkbox" label="check me out!" />);
-    const checkbox = screen.getByLabelText('check me out!');
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
-    await userEvent.click(checkbox);
-    expect(checkbox).toHaveAttribute('aria-checked', 'true');
-    await userEvent.click(checkbox);
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('check that callback function is triggered when clicked', async () => {
-    const onChangeSpy = jest.fn();
-    render(<CheckBox name="checkbox" label="check me out!" onChange={onChangeSpy} />);
-    const checkbox = screen.getByLabelText('check me out!');
-    expect(onChangeSpy).toHaveBeenCalledTimes(0);
-    await userEvent.click(checkbox);
-    expect(onChangeSpy).toHaveBeenCalledTimes(1);
-    expect(onChangeSpy).toHaveBeenCalledWith(true, 'checkbox');
-    await userEvent.click(checkbox);
-    expect(onChangeSpy).toHaveBeenCalledTimes(2);
-    expect(onChangeSpy).toHaveBeenCalledWith(false, 'checkbox');
-  });
-
-  it('checks if start state can be set to checked', async () => {
-    render(<CheckBox name="checkbox" label="I start checked" checked />);
-    const checkbox = screen.getByLabelText('I start checked');
-    expect(checkbox).toBeChecked();
-    expect(checkbox).toHaveAttribute('aria-checked', 'true');
-    await userEvent.click(checkbox);
-    expect(checkbox).not.toBeChecked();
-    expect(checkbox).toHaveAttribute('aria-checked', 'false');
-  });
-
-  it('checkbox can be disabled', async () => {
-    render(<CheckBox name="checkbox" label="I am disabled" disabled />);
-    const checkbox = screen.getByLabelText('I am disabled');
-    expect(checkbox).toBeDisabled();
-    await userEvent.click(checkbox);
-    expect(checkbox).toBeDisabled();
-  });
-
-  it('overrides state value when props value changes', () => {
-    const { rerender } = render(<CheckBox name="checkbox" label="I start checked" checked />);
-    const checkbox = screen.getByLabelText('I start checked');
-    expect(checkbox).toBeChecked();
-    rerender(<CheckBox name="checkbox" label="I start checked" checked={false} />);
-    expect(checkbox).not.toBeChecked();
-  });
-});

package/src/CheckBox/README.md

@@ -1,93 +0,0 @@
----
-title: 'Checkbox'
-type: 'component'
-components:
-- Check
-categories:
-- Forms (deprecated)
-status: 'Deprecate Soon'
-designStatus: 'TBD'
-devStatus: 'Done'
-notes: |
-  Replaced by Form.Checkbox
----
-
-## Basic usage
-
-```jsx live
-<CheckBox
-  name="checkbox"
-  label="check me out!"
-/>
-```
-
-## Disabled
-
-```jsx live
-<CheckBox
-  name="checkbox"
-  label="you cannot check me out"
-  disabled
-/>
-```
-
-## Default checked
-
-```jsx live
-<CheckBox
-  name="checkbox"
-  label="(un)check me out"
-  checked
-/>
-```
-
-## Call a function
-
-```jsx live
-<CheckBox
-  name="checkbox"
-  label="check out the console"
-  onChange={() => console.log('the checkbox changed state')}
-/>
-```
-
-## Controlled example
-
-```jsx live
-class CheckBoxWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.toggleCheckBox = this.toggleCheckBox.bind(this);
-
-    this.state = {
-      checked: false,
-    };
-  }
-
-  toggleCheckBox() {
-    this.setState({
-      checked: !this.state.checked,
-    });
-  }
-
-  render() {
-    return (
-      <div className="d-flex align-items-center">
-        <Button
-          variant="light"
-          className="mr-3"
-          onClick={this.toggleCheckBox}
-        >
-          Click me to toggle the check box!
-        </Button>
-        <CheckBox
-          name="checkbox"
-          label="click the button"
-          checked={this.state.checked}
-        />
-      </div>
-    );
-  }
-}
-```