fix(RadioSimple): create RadioSimple to handle generic component

src/components/RadioGroup/RadioGroup.constants.ts

@@ -7,6 +7,7 @@ const DEFAULTS = {
   GROUP_ORIENTATION: 'vertical',
   GROUP_ARIA_LABEL: 'radio button group',
   OPTION_DISABLED: false,
+  GROUP_IS_RADIO_SIMPLE: false,
 };
 
 const STYLE = {

src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { MultiTemplate, Template } from '../../storybook/helper.stories.templates';
 import { DocumentationPage } from '../../storybook/helper.stories.docs';
 import StyleDocs from '../../storybook/docs.stories.style.mdx';
@@ -7,6 +8,7 @@ import Radio from './Radio';
 import argTypes from './RadioGroup.stories.args';
 import Documentation from './RadioGroup.stories.docs.mdx';
 import { action } from '@storybook/addon-actions';
+import ButtonSimple from '../ButtonSimple';
 
 export default {
   title: 'Momentum UI/RadioGroup',
@@ -110,4 +112,20 @@ Common.parameters = {
   ],
 };
 
-export { Example, Common };
+const RadioSimpleGroup = Template<RadioGroupProps>(RadioGroup).bind({});
+
+RadioSimpleGroup.argTypes = { ...argTypes };
+
+RadioSimpleGroup.args = {
+  options: [
+    <div key="0">
+      <ButtonSimple key="1" >Theme 1</ButtonSimple>
+      <ButtonSimple key="2" >Theme 2</ButtonSimple>
+      <ButtonSimple key="3" >Theme 3</ButtonSimple>
+    </div>
+  ],
+  label: 'RadioSimpleGroup',
+  isRadioSimple: true,
+};
+
+export { Example, Common, RadioSimpleGroup };

src/components/RadioGroup/RadioGroup.tsx

@@ -4,9 +4,10 @@ import { useRadioGroup } from '@react-aria/radio';
 import { useRadioGroupState } from '@react-stately/radio';
 
 import { STYLE, DEFAULTS } from './RadioGroup.constants';
-import { RadioGroupProps, RadioProps } from './RadioGroup.types';
+import { RadioGroupProps, RadioProps, RadioSimpleProps } from './RadioGroup.types';
 import './RadioGroup.style.scss';
 import Radio from './Radio';
+import RadioSimple from './RadioSimple';
 import Text, { TEXT_CONSTANTS } from '../Text';
 
 /**
@@ -23,19 +24,29 @@ const RadioGroup: FC<RadioGroupProps> = (props: RadioGroupProps) => {
     label = DEFAULTS.GROUP_LABEL,
     options,
     style,
+    isRadioSimple = DEFAULTS.GROUP_IS_RADIO_SIMPLE,
   } = props;
 
   const state = useRadioGroupState(props);
-  const { radioGroupProps, labelProps } = useRadioGroup(props, state);
+  const { radioGroupProps, labelProps } = useRadioGroup({...props}, state);
 
   return (
     <div {...radioGroupProps} className={classnames(className, STYLE.group)} id={id} style={style}>
-      <span {...labelProps}>{label}</span>
+      {label && <span {...labelProps}>{label}</span>}
       {description && <Text type={TEXT_CONSTANTS.TYPES.BODY_SECONDARY}>{description}</Text>}
       <RadioContext.Provider value={state}>
         {options &&
-          options.map((option: string | RadioProps) => {
-            if (typeof option === 'string') {
+          options.map((option: string | RadioProps | RadioSimpleProps) => {
+            if (isRadioSimple) {
+              return (
+                <RadioSimple
+                  isDisabled={isDisabled}
+                  value={option.value}
+                >
+                  {option}
+                </RadioSimple>
+              );
+            } else if (typeof option === 'string') {
               return <Radio key={option} value={option} isDisabled={isDisabled} label={option} />;
             } else {
               return <Radio key={option.value} isDisabled={isDisabled} {...option} />;

src/components/RadioGroup/RadioGroup.types.ts

@@ -1,6 +1,8 @@
 import { CSSProperties } from 'react';
 import { AriaRadioGroupProps, AriaRadioProps } from '@react-types/radio';
 
+export type RadioGroupOrientation = 'horizontal' | 'vertical';
+
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
   /**
    * Custom class for overriding this component's CSS.
@@ -15,16 +17,20 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children'> {
   /**
    * Array of radio button options.
    */
-  options?: Array<RadioProps | string>;
+  options?: Array<RadioProps | RadioSimpleProps | string>;
 
   /**
    * The description for the RadioGroup.
    */
-
   description?: string;
+
+  /**
+   * Boolean to describe if the radio component is a ReactNode.
+   */
+  isRadioSimple?: boolean;
 }
 
-export interface RadioProps extends Omit<AriaRadioProps, 'children'> {
+export interface RadioProps extends Omit<AriaRadioProps, 'children' > {
   /**
    * Custom style for overriding this component's CSS.
    */
@@ -40,3 +46,20 @@ export interface RadioProps extends Omit<AriaRadioProps, 'children'> {
    */
   label?: string;
 }
+
+export interface RadioSimpleProps extends AriaRadioProps {
+  /**
+   * The label for the RadioSimple component.
+   */
+  ariaLabel?: string;
+
+  /**
+   * The ariaLabelledby for the RadioSimple component.
+   */
+  ariaLabelledby?: string;
+
+  /**
+   * Custom class for overriding this component's CSS.
+   */
+  className?: string;
+}

src/components/RadioGroup/RadioSimple.style.scss

@@ -0,0 +1,3 @@
+.hidden-radio {
+  display: none;
+}

src/components/RadioGroup/RadioSimple.tsx

@@ -0,0 +1,38 @@
+import React, { FC, useContext, useRef } from 'react';
+
+import { FocusRing} from '@react-aria/focus';
+import { useRadio } from '@react-aria/radio';
+
+import { RadioContext } from './RadioGroup';
+import { DEFAULTS } from './RadioGroup.constants';
+import { RadioSimpleProps } from './RadioGroup.types';
+
+import './RadioSimple.style.scss';
+
+const RadioSimple: FC<RadioSimpleProps> = (props: RadioSimpleProps) => {
+  const { ariaLabelledby, ariaLabel, children, className, id, isDisabled = DEFAULTS.OPTION_DISABLED } = props;
+  const state = useContext(RadioContext);
+  const ref = useRef(null);
+  const { inputProps } = useRadio(props, state, ref);
+
+  return (
+    <label
+      className={className}
+      data-disabled={isDisabled}
+      id={id}
+    >
+      <FocusRing>
+        <input
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledby}
+          className="hidden-radio"
+          ref={ref}
+          {...inputProps}
+        />
+      </FocusRing>
+      {children}
+    </label>
+  );
+};
+
+export default RadioSimple;