diff --git a/src/components/RadioGroup/RadioGroup.constants.ts b/src/components/RadioGroup/RadioGroup.constants.ts index dadd9f3cae..0bfd3f04bd 100644 --- a/src/components/RadioGroup/RadioGroup.constants.ts +++ b/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 = { diff --git a/src/components/RadioGroup/RadioGroup.stories.tsx b/src/components/RadioGroup/RadioGroup.stories.tsx index b7271b7e50..f910558bb8 100644 --- a/src/components/RadioGroup/RadioGroup.stories.tsx +++ b/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(RadioGroup).bind({}); + +RadioSimpleGroup.argTypes = { ...argTypes }; + +RadioSimpleGroup.args = { + options: [ +
+ Theme 1 + Theme 2 + Theme 3 +
+ ], + label: 'RadioSimpleGroup', + isRadioSimple: true, +}; + +export { Example, Common, RadioSimpleGroup }; diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx index 8c646c4fc0..eb9f8d2cc7 100644 --- a/src/components/RadioGroup/RadioGroup.tsx +++ b/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 = (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 (
- {label} + {label && {label}} {description && {description}} {options && - options.map((option: string | RadioProps) => { - if (typeof option === 'string') { + options.map((option: string | RadioProps | RadioSimpleProps) => { + if (isRadioSimple) { + return ( + + {option} + + ); + } else if (typeof option === 'string') { return ; } else { return ; diff --git a/src/components/RadioGroup/RadioGroup.types.ts b/src/components/RadioGroup/RadioGroup.types.ts index 04753260d5..e62d6f97f9 100644 --- a/src/components/RadioGroup/RadioGroup.types.ts +++ b/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 { /** * Custom class for overriding this component's CSS. @@ -15,16 +17,20 @@ export interface RadioGroupProps extends Omit { /** * Array of radio button options. */ - options?: Array; + options?: Array; /** * The description for the RadioGroup. */ - description?: string; + + /** + * Boolean to describe if the radio component is a ReactNode. + */ + isRadioSimple?: boolean; } -export interface RadioProps extends Omit { +export interface RadioProps extends Omit { /** * Custom style for overriding this component's CSS. */ @@ -40,3 +46,20 @@ export interface RadioProps extends Omit { */ 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; +} diff --git a/src/components/RadioGroup/RadioSimple.style.scss b/src/components/RadioGroup/RadioSimple.style.scss new file mode 100644 index 0000000000..5d76d08bb0 --- /dev/null +++ b/src/components/RadioGroup/RadioSimple.style.scss @@ -0,0 +1,3 @@ +.hidden-radio { + display: none; +} \ No newline at end of file diff --git a/src/components/RadioGroup/RadioSimple.tsx b/src/components/RadioGroup/RadioSimple.tsx new file mode 100644 index 0000000000..6b47158c77 --- /dev/null +++ b/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 = (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 ( + + ); +}; + +export default RadioSimple;