+
{ stepContent }
{ renderLabel() }
@@ -170,13 +202,28 @@ const ProgressStep = ( {
};
// Create step content
-const createStepContent = ( variant, isCompleted, isCurrent, sizeClasses, size, icon, index ) => {
+const createStepContent = (
+ variant,
+ isCompleted,
+ isCurrent,
+ sizeClasses,
+ size,
+ icon,
+ index
+) => {
if ( isCompleted ) {
- return
;
+ return (
+
+ );
}
const commonClasses = stepWrapperClasses( isCurrent, sizeClasses, size );
- const variantClasses = getVariantClasses( variant, isCurrent, sizeClasses, size );
+ const variantClasses = getVariantClasses(
+ variant,
+ isCurrent,
+ sizeClasses,
+ size
+ );
let content = null;
if ( variant === 'number' ) {
diff --git a/src/components/progress-steps/progress-steps.stories.jsx b/src/components/progress-steps/progress-steps.stories.jsx
index 7b361e04..f0ead613 100644
--- a/src/components/progress-steps/progress-steps.stories.jsx
+++ b/src/components/progress-steps/progress-steps.stories.jsx
@@ -12,21 +12,25 @@ export default {
variant: {
control: 'select',
options: [ 'dot', 'number', 'icon' ],
- description: 'Defines the style of the step indicator. Choose between "dot", "number", or "icon".',
+ description:
+ 'Defines the style of the step indicator. Choose between "dot", "number", or "icon".',
},
size: {
control: 'select',
options: [ 'sm', 'md', 'lg' ],
- description: 'Sets the size of the step indicator. Options are "small", "medium", or "large".',
+ description:
+ 'Sets the size of the step indicator. Options are "small", "medium", or "large".',
},
type: {
control: 'select',
options: [ 'inline', 'stack' ],
- description: 'Defines the layout of the steps. "inline" places them horizontally, "stack" places them vertically.',
+ description:
+ 'Defines the layout of the steps. "inline" places them horizontally, "stack" places them vertically.',
},
currentStep: {
control: { type: 'number', min: 1, max: 5 },
- description: 'Indicates the active step (1-based index). The step number will be highlighted.',
+ description:
+ 'Indicates the active step (1-based index). The step number will be highlighted.',
},
},
decorators: [
diff --git a/src/components/progress-steps/utils.jsx b/src/components/progress-steps/utils.jsx
index 114ca111..c790fa88 100644
--- a/src/components/progress-steps/utils.jsx
+++ b/src/components/progress-steps/utils.jsx
@@ -13,15 +13,28 @@ export const getVariantClasses = ( variant, isCurrent, sizeClasses, size ) => {
const baseClass = `absolute rounded-full transition-colors duration-500 ${ sizeClasses[ size ].dot }`;
if ( variant === 'dot' ) {
- return cn( baseClass, sizeClasses[ size ].dot, isCurrent ? 'bg-brand-primary-600' : 'bg-text-tertiary' );
+ return cn(
+ baseClass,
+ sizeClasses[ size ].dot,
+ isCurrent ? 'bg-brand-primary-600' : 'bg-text-tertiary'
+ );
}
if ( variant === 'number' ) {
- return cn( baseClass, sizeClasses[ size ].dot, isCurrent ? 'text-brand-primary-600' : 'text-text-tertiary', 'flex items-center justify-center' );
+ return cn(
+ baseClass,
+ sizeClasses[ size ].dot,
+ isCurrent ? 'text-brand-primary-600' : 'text-text-tertiary',
+ 'flex items-center justify-center'
+ );
}
if ( variant === 'icon' ) {
- return cn( baseClass, isCurrent ? 'text-brand-primary-600' : 'text-text-tertiary', 'flex items-center justify-center' );
+ return cn(
+ baseClass,
+ isCurrent ? 'text-brand-primary-600' : 'text-text-tertiary',
+ 'flex items-center justify-center'
+ );
}
return '';
@@ -51,5 +64,9 @@ export const stepWrapperClasses = ( isCurrent, sizeClasses, size ) => {
* @return {string} The combined class names.
*/
export const completedStepCommonClasses = ( sizeClasses, size ) => {
- return cn( 'rounded-full text-brand-primary-600 transition-colors duration-300', sizeClasses[ size ].dot, sizeClasses[ size ].ring );
+ return cn(
+ 'rounded-full text-brand-primary-600 transition-colors duration-300',
+ sizeClasses[ size ].dot,
+ sizeClasses[ size ].ring
+ );
};
diff --git a/src/components/radio-button-group/index.js b/src/components/radio-button-group/index.js
new file mode 100644
index 00000000..a201542f
--- /dev/null
+++ b/src/components/radio-button-group/index.js
@@ -0,0 +1 @@
+export { RadioButtonGroup, RadioButton } from './radio-button-group.jsx';
diff --git a/src/components/radio-button-group/radio-button-group.jsx b/src/components/radio-button-group/radio-button-group.jsx
new file mode 100644
index 00000000..bbf97782
--- /dev/null
+++ b/src/components/radio-button-group/radio-button-group.jsx
@@ -0,0 +1,457 @@
+import React, {
+ useState,
+ useCallback,
+ useMemo,
+ forwardRef,
+ isValidElement,
+ createContext,
+ useContext,
+ Fragment,
+} from 'react';
+import { nanoid } from 'nanoid';
+import { Check } from 'lucide-react';
+
+import { cn, columnClasses } from '@/utilities/functions';
+import Switch from '../switch';
+import {
+ colorClassNames,
+ disabledClassNames,
+ sizeClassNames,
+ sizes,
+ borderClasses,
+ baseClasses,
+ hoverClasses,
+ focusClasses,
+} from './styles';
+
+const RadioButtonContext = createContext();
+const useRadioButton = () => useContext( RadioButtonContext );
+
+const RadioButtonGroup = ( {
+ children,
+ name,
+ style = 'simple',
+ size = 'md',
+ value,
+ defaultValue,
+ by = 'id',
+ as: AsElement = 'div',
+ onChange,
+ className,
+ disableGroup = false,
+ vertical = false,
+ columns = 4,
+ multiSelection = false,
+} ) => {
+ const isControlled = useMemo( () => typeof value !== 'undefined', [ value ] );
+ const nameAttr = useMemo(
+ () => name || `radio-button-group-${ nanoid() }`,
+ [ name ]
+ );
+ let initialSelectedValue;
+ if ( isControlled ) {
+ initialSelectedValue = value;
+ } else if ( multiSelection ) {
+ initialSelectedValue = defaultValue ?? [];
+ } else {
+ initialSelectedValue = defaultValue;
+ }
+
+ const [ selectedValue, setSelectedValue ] = useState( initialSelectedValue );
+
+ const handleChange = useCallback(
+ ( newValue ) => {
+ if ( multiSelection ) {
+ // Handles multi-selection logic
+ setSelectedValue( ( prevValue ) => {
+ const isAlreadySelected = prevValue.includes( newValue );
+ const updatedValue = isAlreadySelected
+ ? prevValue.filter( ( val ) => val !== newValue )
+ : [ ...prevValue, newValue ];
+
+ if ( typeof onChange === 'function' ) {
+ onChange( updatedValue );
+ }
+ return updatedValue;
+ } );
+ } else {
+ // Handles single selection logic
+ if ( ! isControlled ) {
+ setSelectedValue( newValue );
+ }
+ if ( typeof onChange !== 'function' ) {
+ return;
+ }
+ onChange( newValue );
+ }
+ },
+ [ onChange ]
+ );
+ className = cn(
+ `grid grid-cols-4 gap-2`,
+ columnClasses[ columns ],
+ style === 'tile' && 'gap-0',
+ vertical && 'grid-cols-1',
+ className
+ );
+
+ const groupClassName = cn(
+ style === 'tile'
+ ? 'border border-border-subtle border-solid rounded-md shadow-sm'
+ : 'gap-6',
+ className
+ );
+
+ const renderRadioButtonContext = () => (
+
+ { React.Children.map( children, ( child ) => {
+ if ( ! isValidElement( child ) ) {
+ return null;
+ }
+ return child;
+ } ) }
+
+ );
+
+ return (
+ <>
+ { style === 'tile' ? (
+
+ { renderRadioButtonContext() }
+
+ ) : (
+
+ { renderRadioButtonContext() }
+
+ ) }
+
+ );
+};
+
+const RadioButtonComponent = (
+ {
+ id,
+ label,
+ value,
+ children,
+ disabled,
+ icon = null,
+ inlineIcon = false,
+ hideSelection = false,
+ reversePosition = false,
+ borderOn = false,
+ badgeItem = null,
+ useSwitch = false,
+ ...props
+ },
+ ref
+) => {
+ const providerValue = useRadioButton();
+ const {
+ name,
+ value: selectedValue,
+ by,
+ onChange,
+ disableAll,
+ checked,
+ multiSelection,
+ size,
+ } = providerValue;
+
+ const color = 'primary';
+ const radioButtonId = useMemo( () => id || `radio-button-${ nanoid() }`, [ id ] ),
+ isDisabled = useMemo(
+ () => disableAll || disabled,
+ [ disableAll, disabled ]
+ );
+ const checkedValue = useMemo( () => {
+ if ( multiSelection ) {
+ return (
+ Array.isArray( selectedValue ) && selectedValue.includes( value )
+ );
+ }
+ if ( typeof checked !== 'undefined' ) {
+ return checked;
+ }
+
+ if ( typeof selectedValue !== typeof value ) {
+ return false;
+ }
+ if ( typeof selectedValue === 'string' ) {
+ return selectedValue === value;
+ }
+
+ if ( Array.isArray( selectedValue ) ) {
+ return selectedValue.includes( value );
+ }
+
+ return selectedValue[ by ] === value[ by ];
+ }, [ selectedValue, value, checked ] );
+
+ const renderLabel = useCallback( () => {
+ if ( isValidElement( label ) ) {
+ return label;
+ }
+
+ if ( ! label.heading ) {
+ return null;
+ }
+ return (
+
+ { icon &&
{ icon } }
+
+
+ { label.heading }
+
+ { label.description && (
+
+ { label.description }
+
+ ) }
+
+
+ );
+ }, [ label ] );
+
+ if ( providerValue.style === 'tile' ) {
+ return (
+
+ { children }
+
+ );
+ }
+ const handleLabelClick = () => {
+ if ( ! isDisabled ) {
+ if ( multiSelection ) {
+ // In multi-selection, toggle each individual selection
+ onChange( value, ! checkedValue ); // Pass the toggled value
+ } else {
+ // In single selection, only one can be selected
+ onChange( value ); // Trigger onChange with the selected value
+ }
+ }
+ };
+
+ return (
+