- // interchangeably between ControlGroup type controls and regular Controls
- const labelledByIdsForControl = isControlGroup ? labelledByIds : undefined;
- return omitUndefinedProperties({
- ...controlProps,
- 'aria-describedby': classNames(controlProps['aria-describedby'], describedByIds) || undefined,
- 'aria-labelledby': classNames(controlProps['aria-labelledby'], labelledByIdsForControl) || undefined,
- id: controlId,
- });
- }, [
- isControlGroup,
- describedByIds,
- labelledByIds,
- controlId,
- ]);
-
- const getLabelProps = (labelProps) => {
- const id = registerLabelerId(labelProps?.id);
- if (isControlGroup) {
- return { ...labelProps, id };
- }
- return { ...labelProps, htmlFor: controlId };
- };
-
- const getDescriptorProps = (descriptorProps) => {
- const id = registerDescriptorId(descriptorProps?.id);
- return { ...descriptorProps, id };
- };
-
- // eslint-disable-next-line react/jsx-no-constructed-context-values
- const contextValue = {
- getControlProps,
- getLabelProps,
- getDescriptorProps,
- useSetIsControlGroupEffect,
- isControlGroup,
- controlId,
- isInvalid,
- isValid,
- size,
- hasFormGroupProvider: true,
- };
-
- return (
-
- {children}
-
- );
-};
-
-FormGroupContextProvider.propTypes = {
- children: PropTypes.node.isRequired,
- controlId: PropTypes.string,
- isInvalid: PropTypes.bool,
- isValid: PropTypes.bool,
- size: PropTypes.oneOf([
- FORM_CONTROL_SIZES.SMALL,
- FORM_CONTROL_SIZES.LARGE,
- ]),
-};
-
-FormGroupContextProvider.defaultProps = {
- controlId: undefined,
- isInvalid: undefined,
- isValid: undefined,
- size: undefined,
-};
-
-export {
- FormGroupContext,
- FormGroupContextProvider,
- useFormGroupContext,
-};
diff --git a/src/generic/SelectableBox/FormLabel.jsx b/src/generic/SelectableBox/FormLabel.jsx
deleted file mode 100644
index 7f45bb9bc..000000000
--- a/src/generic/SelectableBox/FormLabel.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { useFormGroupContext } from './FormGroupContext';
-import { FORM_CONTROL_SIZES } from './constants';
-
-const FormLabel = ({ children, isInline, ...props }) => {
- const { size, isControlGroup, getLabelProps } = useFormGroupContext();
- const className = classNames(
- 'pgn__form-label',
- {
- 'pgn__form-label-inline': isInline,
- 'pgn__form-label-lg': size === FORM_CONTROL_SIZES.LARGE,
- 'pgn__form-label-sm': size === FORM_CONTROL_SIZES.SMALL,
- },
- props.className,
- );
- const labelProps = getLabelProps({ ...props, className });
- const componentType = isControlGroup ? 'p' : 'label';
- return React.createElement(componentType, labelProps, children);
-};
-
-const SIZE_CHOICES = ['sm', 'lg'];
-
-FormLabel.propTypes = {
- /** Specifies class name to append to the base element. */
- className: PropTypes.string,
- /** Specifies contents of the component. */
- children: PropTypes.node.isRequired,
- /** Specifies whether the component should be displayed with inline styling. */
- isInline: PropTypes.bool,
- /** Specifies size of the component. */
- size: PropTypes.oneOf(SIZE_CHOICES),
-};
-
-FormLabel.defaultProps = {
- isInline: false,
- size: undefined,
- className: undefined,
-};
-
-export default FormLabel;
diff --git a/src/generic/SelectableBox/FormRadio.jsx b/src/generic/SelectableBox/FormRadio.jsx
deleted file mode 100644
index 1609f8266..000000000
--- a/src/generic/SelectableBox/FormRadio.jsx
+++ /dev/null
@@ -1,112 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { useRadioSetContext } from './FormRadioSetContext';
-import { FormGroupContextProvider, useFormGroupContext } from './FormGroupContext';
-import FormLabel from './FormLabel';
-import FormControlFeedback from './FormControlFeedback';
-
-const RadioControl = React.forwardRef((props, ref) => {
- const { getControlProps } = useFormGroupContext();
- const { getRadioControlProps, hasRadioSetProvider } = useRadioSetContext();
- let radioProps = getControlProps({
- ...props,
- className: classNames('pgn__form-radio-input', props.className),
- });
-
- if (hasRadioSetProvider) {
- radioProps = getRadioControlProps(radioProps);
- }
-
- const onChange = (...args) => {
- // eslint-disable-next-line no-console
- console.log('RadioControl.onChange called with args: ', args);
- if (radioProps.onChange) {
- radioProps.onChange(...args);
- }
- };
-
- return (
-
-
-
-
-
- {children}
-
- {description && (
-
- {description}
-
- )}
-
-
-));
-
-FormRadio.propTypes = {
- /** Specifies id of the FormRadio component. */
- id: PropTypes.string,
- /** Specifies contents of the component. */
- children: PropTypes.node.isRequired,
- /** Specifies class name to append to the base element. */
- className: PropTypes.string,
- /** Specifies class name for control component. */
- controlClassName: PropTypes.string,
- /** Specifies class name for label component. */
- labelClassName: PropTypes.string,
- /** Specifies description to show under the radio's value. */
- description: PropTypes.node,
- /** Specifies whether to display component in invalid state, this affects styling. */
- isInvalid: PropTypes.bool,
- /** Specifies whether to display component in valid state, this affects styling. */
- isValid: PropTypes.bool,
- /** Specifies whether the `FormRadio` is disabled. */
- disabled: PropTypes.bool,
-};
-
-FormRadio.defaultProps = {
- id: undefined,
- className: undefined,
- controlClassName: undefined,
- labelClassName: undefined,
- description: undefined,
- isInvalid: false,
- isValid: false,
- disabled: false,
-};
-
-export { RadioControl };
-export default FormRadio;
diff --git a/src/generic/SelectableBox/FormRadioSet.jsx b/src/generic/SelectableBox/FormRadioSet.jsx
deleted file mode 100644
index 05524ba20..000000000
--- a/src/generic/SelectableBox/FormRadioSet.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useFormGroupContext } from './FormGroupContext';
-import { FormRadioSetContextProvider } from './FormRadioSetContext';
-import FormControlSet from './FormControlSet';
-
-const FormRadioSet = ({
- children,
- name,
- value,
- defaultValue,
- isInline,
- onChange,
- onFocus,
- onBlur,
- ...props
-}) => {
- const { getControlProps, useSetIsControlGroupEffect } = useFormGroupContext();
- useSetIsControlGroupEffect(true);
- const controlProps = getControlProps(props);
- return (
-
-
- {children}
-
-
- );
-};
-
-FormRadioSet.propTypes = {
- /** Specifies contents of the component. */
- children: PropTypes.node.isRequired,
- /** A class name to append to the base element. */
- className: PropTypes.string,
- /** Specifies name for the component. */
- name: PropTypes.string.isRequired,
- /** Specifies values for the FormRadioSet. */
- value: PropTypes.string,
- /** Specifies default values. */
- defaultValue: PropTypes.string,
- /** Specifies whether the component should be displayed with inline styling. */
- isInline: PropTypes.bool,
- /** Specifies onChange event handler. */
- onChange: PropTypes.func,
- /** Specifies onFocus event handler. */
- onFocus: PropTypes.func,
- /** Specifies onBlur event handler. */
- onBlur: PropTypes.func,
-};
-
-FormRadioSet.defaultProps = {
- className: undefined,
- value: undefined,
- defaultValue: undefined,
- isInline: false,
- onChange: undefined,
- onFocus: undefined,
- onBlur: undefined,
-};
-
-export default FormRadioSet;
diff --git a/src/generic/SelectableBox/FormRadioSetContext.jsx b/src/generic/SelectableBox/FormRadioSetContext.jsx
deleted file mode 100644
index 38bbc3292..000000000
--- a/src/generic/SelectableBox/FormRadioSetContext.jsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import { callAllHandlers } from './fieldUtils';
-
-const identityFn = props => props;
-
-const FormRadioSetContext = React.createContext({
- getRadioControlProps: identityFn,
- hasRadioSetProvider: false,
-});
-
-const useRadioSetContext = () => useContext(FormRadioSetContext);
-
-const FormRadioSetContextProvider = ({
- children,
- name,
- onBlur,
- onFocus,
- onChange,
- value,
- defaultValue,
-}) => {
- const handleChange = (...args) => {
- // eslint-disable-next-line no-console
- console.log('FormRadioSetContextProvider.handleChange called with args: ', args);
- onChange(...args);
- };
- const isControlled = !defaultValue && value !== undefined;
- // eslint-disable-next-line no-console
- console.log('FormRadioSetContextProvider | isControlled: ', isControlled);
- const getRadioControlProps = (radioProps) => ({
- ...radioProps,
- name,
- /* istanbul ignore next */
- onBlur: radioProps.onBlur ? callAllHandlers(onBlur, radioProps.onBlur) : onBlur,
- /* istanbul ignore next */
- onFocus: radioProps.onFocus ? callAllHandlers(onFocus, radioProps.onFocus) : onFocus,
- /* istanbul ignore next */
- onChange: radioProps.onChange ? callAllHandlers(handleChange, radioProps.onChange) : onChange,
- checked: isControlled ? value === radioProps.value : undefined,
- defaultChecked: isControlled ? undefined : defaultValue === radioProps.value,
- });
- // eslint-disable-next-line react/jsx-no-constructed-context-values
- const contextValue = {
- name,
- value,
- defaultValue,
- getRadioControlProps,
- onBlur,
- onFocus,
- onChange,
- hasRadioSetProvider: true,
- };
- return (
-
- {children}
-
- );
-};
-
-FormRadioSetContextProvider.propTypes = {
- children: PropTypes.node.isRequired,
- name: PropTypes.string.isRequired,
- onBlur: PropTypes.func,
- onFocus: PropTypes.func,
- onChange: PropTypes.func,
- value: PropTypes.string,
- defaultValue: PropTypes.string,
-};
-
-FormRadioSetContextProvider.defaultProps = {
- onBlur: undefined,
- onFocus: undefined,
- onChange: undefined,
- value: undefined,
- defaultValue: undefined,
-};
-
-export default FormRadioSetContext;
-export {
- useRadioSetContext,
- FormRadioSetContextProvider,
-};
diff --git a/src/generic/SelectableBox/FormText.jsx b/src/generic/SelectableBox/FormText.jsx
deleted file mode 100644
index f6469a151..000000000
--- a/src/generic/SelectableBox/FormText.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-// import Icon from '../Icon';
-// import {
-// Check, Close, Cancel, CheckCircle, RadioButtonUnchecked, WarningFilled,
-// } from '../../icons';
-
-import { FORM_TEXT_TYPES } from './constants';
-
-// const FORM_TEXT_ICONS = {
-// [FORM_TEXT_TYPES.DEFAULT]: null,
-// [FORM_TEXT_TYPES.VALID]: Check,
-// [FORM_TEXT_TYPES.INVALID]: Close,
-// [FORM_TEXT_TYPES.WARNING]: WarningFilled,
-// [FORM_TEXT_TYPES.CRITERIA_EMPTY]: RadioButtonUnchecked,
-// [FORM_TEXT_TYPES.CRITERIA_VALID]: CheckCircle,
-// [FORM_TEXT_TYPES.CRITERIA_INVALID]: Cancel,
-// };
-
-const resolveTextType = ({ isInvalid, isValid }) => {
- if (isValid) {
- return FORM_TEXT_TYPES.VALID;
- }
- if (isInvalid) {
- return FORM_TEXT_TYPES.INVALID;
- }
- return FORM_TEXT_TYPES.DEFAULT;
-};
-
-// const FormTextIcon = ({ type, customIcon }) => {
-// if (customIcon) {
-// return customIcon;
-// }
-
-// const typeIcon = FORM_TEXT_ICONS[type];
-// if (typeIcon) {
-// return
- {/* {hasIcon &&
} */}
-
- {children}
-
-
-
-
-
-
It is my first SelectableBox
-
Swiss
-
-
- Cheddar
-
-
- Pepperjack
-
-
-
-
-
-
It is Red color
-
Select me
-
-
- Green
- Leaves and grass
-
-
- Blue
- The sky
-
-
- );
-}
-```
-## As Checkbox
-As ``Checkbox`` with ``isIndeterminate``
-
-```jsx live
-() => {
- const type = 'checkbox';
- const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
- const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
-
- const allChecked = allCheeseOptions.every(value => checkedCheeses.includes(value));
- const someChecked = allCheeseOptions.some(value => checkedCheeses.includes(value));
- const isIndeterminate = someChecked && !allChecked;
- const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
-
- const handleChange = e => {
- e.target.checked ? add(e.target.value) : remove(e.target.value);
- };
-
- const handleCheckAllChange = ({ checked }) => {
- checked ? set(allCheeseOptions) : clear();
- };
-
- return (
- <>
-
-
- All the cheese
-
-
-
-
-
-
It is my first SelectableBox
-
Swiss
-
-
- Cheddar
-
-
- Pepperjack
-
-
-
- );
-}
-```
-
-As ``Checkbox`` with ``ariaLabelledby``
-
-```jsx live
-() => {
- const type = 'checkbox';
- const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
- const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
-
- const handleChange = e => {
- e.target.checked ? add(e.target.value) : remove(e.target.value);
- };
-
- const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
-
- return (
-
-
- Select your favorite cheese
-
-
-
-
- Swiss
-
-
-
-
- Cheddar
-
-
-
-
- Pepperjack
-
-
-
-
- );
-}
-```
diff --git a/src/generic/SelectableBox/SelectableBoxSet.jsx b/src/generic/SelectableBox/SelectableBoxSet.jsx
deleted file mode 100644
index a96cccab5..000000000
--- a/src/generic/SelectableBox/SelectableBoxSet.jsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { getInputType } from './utils';
-// import { requiredWhenNot } from '../utils/propTypes';
-
-const INPUT_TYPES = [
- 'radio',
- 'checkbox',
-];
-
-const DEFAULT_COLUMNS_NUMBER = 2;
-
-const SelectableBoxSet = React.forwardRef(({
- children,
- name,
- value,
- defaultValue,
- onChange,
- type,
- columns,
- className,
- ariaLabel,
- ariaLabelledby,
- ...props
-}, ref) => {
- const inputType = getInputType('SelectableBoxSet', type);
-
- return React.createElement(
- inputType,
- {
- name,
- value,
- defaultValue,
- onChange,
- ref,
- className: classNames(
- 'pgn__selectable_box-set',
- `pgn__selectable_box-set--${columns || DEFAULT_COLUMNS_NUMBER}`,
- className,
- ),
- 'aria-label': ariaLabel,
- 'aria-labelledby': ariaLabelledby,
- ...props,
- },
- children,
- );
-});
-
-SelectableBoxSet.propTypes = {
- /** Specifies a name for the group of `SelectableBox`'es. */
- name: PropTypes.string.isRequired,
- /** Content of the `SelectableBoxSet`. */
- children: PropTypes.node,
- /** A function that receives event of the clicked `SelectableBox` and can be used to handle the value change. */
- onChange: PropTypes.func,
- /** Indicates selected `SelectableBox`'es. */
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
- /** Specifies default values for the `SelectableBox`'es. */
- defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- /** Indicates the input type: checkbox or radio. */
- type: PropTypes.oneOf(INPUT_TYPES),
- /**
- * Specifies number of `SelectableBox`'es in a row.
- *
- * Class that is responsible for the columns number: `pgn__selectable_box-set--{columns}`.
- * Max number of columns: `12`.
- */
- columns: PropTypes.number,
- /** A class that is be appended to the base element. */
- className: PropTypes.string,
- /**
- * The ID of the label for the `SelectableBoxSet`.
- *
- * An accessible label must be provided to the `SelectableBoxSet`.
- */
- ariaLabelledby: PropTypes.string,
- /**
- * A label for the `SelectableBoxSet`.
- *
- * If not using `ariaLabelledby`, then `ariaLabel` must be provided */
- // eslint-disable-next-line react/forbid-prop-types
- ariaLabel: PropTypes.any, // requiredWhenNot(PropTypes.string, 'ariaLabelledby'),
-};
-
-SelectableBoxSet.defaultProps = {
- children: undefined,
- onChange: () => {},
- value: undefined,
- defaultValue: undefined,
- type: 'radio',
- columns: DEFAULT_COLUMNS_NUMBER,
- className: undefined,
- ariaLabelledby: undefined,
- ariaLabel: undefined,
-};
-
-export default SelectableBoxSet;
diff --git a/src/generic/SelectableBox/_variables.scss b/src/generic/SelectableBox/_variables.scss
deleted file mode 100644
index b7d4e114d..000000000
--- a/src/generic/SelectableBox/_variables.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-$selectable-box-padding: 1rem !default;
-$selectable-box-border-radius: .25rem !default;
-$selectable-box-space: .75rem !default;
-$min-cols-number: 1 !default;
-$max-cols-number: 12 !default;
diff --git a/src/generic/SelectableBox/constants.js b/src/generic/SelectableBox/constants.js
deleted file mode 100644
index 68abdda93..000000000
--- a/src/generic/SelectableBox/constants.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-const FORM_CONTROL_SIZES = {
- SMALL: 'sm',
- LARGE: 'lg',
-};
-
-const FORM_TEXT_TYPES = {
- DEFAULT: 'default',
- VALID: 'valid',
- INVALID: 'invalid',
- WARNING: 'warning',
- CRITERIA_EMPTY: 'criteria-empty',
- CRITERIA_VALID: 'criteria-valid',
- CRITERIA_INVALID: 'criteria-invalid',
-};
-
-export { FORM_CONTROL_SIZES, FORM_TEXT_TYPES };
diff --git a/src/generic/SelectableBox/fieldUtils.js b/src/generic/SelectableBox/fieldUtils.js
deleted file mode 100644
index 5c0d980a1..000000000
--- a/src/generic/SelectableBox/fieldUtils.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import classNames from 'classnames';
-import { useState, useEffect } from 'react';
-import newId from './newId';
-
-const omitUndefinedProperties = (obj = {}) => Object.entries(obj)
- .reduce((acc, [key, value]) => {
- if (value !== undefined) {
- acc[key] = value;
- }
- return acc;
- }, {});
-
-const callAllHandlers = (...handlers) => {
- const unifiedEventHandler = (event) => {
- handlers
- .filter(handler => typeof handler === 'function')
- .forEach(handler => handler(event));
- };
- return unifiedEventHandler;
-};
-
-const useHasValue = ({ defaultValue, value }) => {
- const [hasUncontrolledValue, setHasUncontrolledValue] = useState(!!defaultValue || defaultValue === 0);
- const hasValue = !!value || value === 0 || hasUncontrolledValue;
- const handleInputEvent = (e) => setHasUncontrolledValue(e.target.value);
- return [hasValue, handleInputEvent];
-};
-
-const useIdList = (uniqueIdPrefix, initialList) => {
- const [idList, setIdList] = useState(initialList || []);
- const addId = (idToAdd) => {
- setIdList(oldIdList => [...oldIdList, idToAdd]);
- return idToAdd;
- };
- const getNewId = () => {
- const idToAdd = newId(`${uniqueIdPrefix}-`);
- return addId(idToAdd);
- };
- const removeId = (idToRemove) => {
- setIdList(oldIdList => oldIdList.filter(id => id !== idToRemove));
- };
-
- const useRegisteredId = (explicitlyRegisteredId) => {
- const [registeredId, setRegisteredId] = useState(explicitlyRegisteredId);
- useEffect(() => {
- if (explicitlyRegisteredId) {
- addId(explicitlyRegisteredId);
- } else if (!registeredId) {
- setRegisteredId(getNewId(uniqueIdPrefix));
- }
- return () => removeId(registeredId);
- }, [registeredId, explicitlyRegisteredId]);
- return registeredId;
- };
-
- return [idList, useRegisteredId];
-};
-
-const mergeAttributeValues = (...values) => {
- const mergedValues = classNames(values);
- return mergedValues || undefined;
-};
-
-export {
- callAllHandlers,
- useHasValue,
- mergeAttributeValues,
- useIdList,
- omitUndefinedProperties,
-};
diff --git a/src/generic/SelectableBox/index.jsx b/src/generic/SelectableBox/index.jsx
deleted file mode 100644
index d5e1978ff..000000000
--- a/src/generic/SelectableBox/index.jsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import SelectableBoxSet from './SelectableBoxSet';
-import { useCheckboxSetContext } from './FormCheckboxSetContext';
-import { useRadioSetContext } from './FormRadioSetContext';
-import { getInputType } from './utils';
-
-const INPUT_TYPES = [
- 'radio',
- 'checkbox',
-];
-
-const SelectableBox = React.forwardRef(({
- type,
- value,
- checked,
- children,
- isIndeterminate,
- isInvalid,
- onClick,
- onFocus,
- inputHidden,
- className,
- ...props
-}, ref) => {
- const inputType = getInputType('SelectableBox', type);
- const { value: radioValue } = useRadioSetContext();
- const { value: checkboxValues = [] } = useCheckboxSetContext();
-
- const isChecked = () => {
- switch (type) {
- case 'radio':
- return radioValue === value;
- case 'checkbox':
- return checkboxValues.includes(value);
- default:
- return radioValue === value;
- }
- };
-
- const inputRef = useRef(null);
- const input = React.createElement(inputType, {
- value,
- checked,
- hidden: inputHidden,
- ref: inputRef,
- tabIndex: -1,
- onChange: () => {},
- ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),
- }, null);
-
- useEffect(() => {
- if (onClick && inputRef.current) {
- inputRef.current.onclick = () => onClick(inputRef.current);
- }
- }, [onClick]);
-
- return (
- inputRef.current.click()}
- onClick={() => inputRef.current.click()}
- onFocus={onFocus}
- className={classNames('pgn__selectable_box', className, {
- 'pgn__selectable_box-active': isChecked() || checked,
- 'pgn__selectable_box-invalid': isInvalid,
- })}
- tabIndex={0}
- ref={ref}
- {...props}
- >
- {input}
- {children}
-
- );
-});
-
-SelectableBox.propTypes = {
- /** Content of the `SelectableBox`. */
- children: PropTypes.node.isRequired,
- /** A value that is passed to the input tag. */
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
- /** Controls whether `SelectableBox` is checked. */
- checked: PropTypes.bool,
- /** Indicates the input type: checkbox or radio. */
- type: PropTypes.oneOf(INPUT_TYPES),
- /** Function that is called when the `SelectableBox` is clicked. */
- onClick: PropTypes.func,
- /** Function that is called when the `SelectableBox` is focused. */
- onFocus: PropTypes.func,
- /** Controls display of the input (checkbox or radio button) on the `SelectableBox`. */
- inputHidden: PropTypes.bool,
- /** Indicates a state for the 'checkbox' `type` when `SelectableBox` is neither checked nor unchecked. */
- isIndeterminate: PropTypes.bool,
- /** Adds errors styles to the `SelectableBox`. */
- isInvalid: PropTypes.bool,
- /** A class that is appended to the base element. */
- className: PropTypes.string,
-};
-
-SelectableBox.defaultProps = {
- value: undefined,
- checked: false,
- type: 'radio',
- onClick: () => {},
- onFocus: () => {},
- inputHidden: true,
- isIndeterminate: false,
- isInvalid: false,
- className: undefined,
-};
-
-SelectableBox.Set = SelectableBoxSet;
-export default SelectableBox;
diff --git a/src/generic/SelectableBox/index.scss b/src/generic/SelectableBox/index.scss
deleted file mode 100644
index 1038286af..000000000
--- a/src/generic/SelectableBox/index.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@import "variables";
-
-.pgn__selectable_box-set {
- display: grid;
- grid-auto-rows: 1fr;
- grid-gap: $selectable-box-space;
-
- @for $i from $min-cols-number through $max-cols-number {
- &.pgn__selectable_box-set--#{$i} {
- grid-template-columns: repeat(#{$i}, 1fr);
- }
- }
-
- & > * + * {
- margin: 0;
- }
-}
-
-.pgn__selectable_box {
- position: relative;
- height: 100%;
- padding: $selectable-box-padding;
- box-shadow: $level-1-box-shadow;
- border-radius: $selectable-box-border-radius;
- text-align: start;
- background: $white;
-
- &:focus-visible {
- outline: 1px solid $primary-700;
- }
-
- .pgn__form-radio,
- .pgn__form-checkbox {
- position: absolute;
- top: $selectable-box-padding;
- inset-inline-end: $selectable-box-padding;
-
- input {
- margin-inline-end: 0;
- }
- }
-
- * {
- pointer-events: none;
- }
-}
-
-.pgn__selectable_box-active {
- outline: 2px solid $primary-500;
-}
-
-.pgn__selectable_box-invalid {
- outline: 2px solid $danger-300;
-}
diff --git a/src/generic/SelectableBox/newId.js b/src/generic/SelectableBox/newId.js
deleted file mode 100644
index 9055c9e31..000000000
--- a/src/generic/SelectableBox/newId.js
+++ /dev/null
@@ -1,8 +0,0 @@
-let lastId = 0;
-
-const newId = (prefix = 'id') => {
- lastId += 1;
- return `${prefix}${lastId}`;
-};
-
-export default newId;
diff --git a/src/generic/SelectableBox/tests/SelectableBox.test.jsx b/src/generic/SelectableBox/tests/SelectableBox.test.jsx
deleted file mode 100644
index 226c5a9f8..000000000
--- a/src/generic/SelectableBox/tests/SelectableBox.test.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import renderer from 'react-test-renderer';
-
-import SelectableBox from '..';
-
-const checkboxType = 'checkbox';
-const checkboxText = 'SelectableCheckbox';
-
-const radioType = 'radio';
-const radioText = 'SelectableRadio';
-
-const SelectableCheckbox = (props) => {checkboxText} ;
-
-const SelectableRadio = (props) => {radioText} ;
-
-describe('SelectableBox
- )).toJSON();
- expect(tree).toMatchSnapshot();
- });
- it('correct render when type prop is changed', () => {
- const { rerender } = render(
- {boxText(1)}
- {boxText(2)}
- {boxText(3)}
-
-);
-
-const SelectableCheckboxSet = (props) => (
-
- {checkboxText(1)}
- {checkboxText(2)}
- {checkboxText(3)}
-
-);
-
-const SelectableRadioSet = (props) => (
-
- {radioText(1)}
- {radioText(2)}
- {radioText(3)}
-
-);
-
-describe('{checkboxText(1)} ,
- );
- expect(screen.getByText(checkboxText(1))).toBeInTheDocument();
- });
- it('renders with on change event', async () => {
- const onChangeSpy = jest.fn();
- render(Radio Set Label text
-
-
-`;
diff --git a/src/generic/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap b/src/generic/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap
deleted file mode 100644
index 4c9a0ab8f..000000000
--- a/src/generic/SelectableBox/tests/__snapshots__/SelectableBoxSet.test.jsx.snap
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`