Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(odyssey-react): cleanup RadioButton and RadioGroup
- Loading branch information
1 parent
ee2857a
commit 8d99c07
Showing
11 changed files
with
453 additions
and
548 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
125 changes: 125 additions & 0 deletions
125
packages/odyssey-react/src/components/Radio/Radio.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,125 @@ | ||
/*! | ||
* Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. | ||
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") | ||
* | ||
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* | ||
* See the License for the specific language governing permissions and limitations under the License. | ||
*/ | ||
|
||
import React from "react"; | ||
import { render, fireEvent, screen, within } from "@testing-library/react"; | ||
import Radio from "."; | ||
|
||
const radioRole = 'radio'; | ||
const groupRole = 'group'; | ||
const legend = 'Select speed'; | ||
const name = 'speed'; | ||
|
||
const warpLabel = 'Warp speed'; | ||
const warpValue = 'warp'; | ||
|
||
const tree = (props: Record<string, unknown> = {}) => ( | ||
<Radio.Group {...props} legend={legend} name={name}> | ||
<Radio.Button label="Lightspeed" value="light" /> | ||
<Radio.Button label="Warp speed" value="warp" /> | ||
<Radio.Button label="Ludicrous speed" value="ludicrous" /> | ||
</Radio.Group> | ||
); | ||
|
||
describe("Radio", () => { | ||
it('renders visibly into the document', () => { | ||
expect.assertions(4); | ||
render(tree()); | ||
|
||
const group = screen.getByRole(groupRole, { name: legend }); | ||
expect(group).toBeVisible(); | ||
|
||
const radios = within(group).getAllByRole(radioRole); | ||
radios.forEach((radio) => { | ||
expect(radio).toBeVisible(); | ||
}); | ||
}); | ||
|
||
it('renders through children that are not expected Radio.Button', () => { | ||
render( | ||
// @ts-expect-error Radio.Group does not accept text as children | ||
<Radio.Group legend={legend} name={name}> | ||
oops | ||
</Radio.Group> | ||
); | ||
|
||
expect(screen.getByRole(groupRole)).toContainHTML('oops'); | ||
}); | ||
|
||
it('renders a controlled checked input when provided with a valid value', () => { | ||
render(tree({ value: warpValue })); | ||
|
||
const radio = screen.getByLabelText(warpLabel); | ||
expect(radio).toBeChecked(); | ||
}); | ||
|
||
it('renders a uncontrolled checked input when a Radio.Button is checked', () => { | ||
render(tree()); | ||
|
||
const radio = screen.getByLabelText(warpLabel); | ||
|
||
fireEvent.click(radio); | ||
expect(radio).toBeChecked(); | ||
}); | ||
|
||
it('renders hint text when provided', () => { | ||
const hint = 'Time is relative'; | ||
render(tree({ hint })); | ||
|
||
const hintElement = screen.getByText(hint); | ||
expect(hintElement).toBeVisible(); | ||
}); | ||
|
||
it('invokes ref with expected args after render', () => { | ||
const ref = jest.fn(); | ||
|
||
render(tree({ ref })); | ||
|
||
expect(ref).toHaveBeenCalledTimes(1); | ||
expect(ref).toHaveBeenLastCalledWith(screen.getByRole(groupRole)); | ||
}); | ||
|
||
it('invokes onChange with expected args when change input event fires', () => { | ||
const onChange = jest.fn(); | ||
render(tree({ onChange })); | ||
|
||
const radio = screen.getByLabelText(warpLabel); | ||
fireEvent.click(radio); | ||
|
||
expect(onChange).toHaveBeenCalledTimes(1); | ||
expect(onChange).toHaveBeenLastCalledWith( | ||
expect.objectContaining({ type: 'change' }), | ||
warpValue | ||
); | ||
}); | ||
|
||
describe('propagation to Radio.Button children', () => { | ||
it.each([ | ||
['name', name], | ||
['disabled', undefined], | ||
['required', undefined] | ||
])('renders %s attribute as expected', ( | ||
attr: string, attrValue: string | undefined | ||
) => { | ||
expect.assertions(3); | ||
render(tree({ [attr]: attrValue ?? true })); | ||
|
||
const radios = screen.getAllByRole(radioRole); | ||
|
||
radios.forEach((radio) => { | ||
expect(radio).toHaveAttribute(attr, attrValue); | ||
}); | ||
}); | ||
}); | ||
|
||
a11yCheck(() => render(tree())); | ||
}); |
88 changes: 88 additions & 0 deletions
88
packages/odyssey-react/src/components/Radio/RadioButton/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,88 @@ | ||
/*! | ||
* Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. | ||
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") | ||
* | ||
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* | ||
* See the License for the specific language governing permissions and limitations under the License. | ||
*/ | ||
|
||
import React, { forwardRef } from 'react'; | ||
import type { ComponentPropsWithRef } from 'react'; | ||
import { useRadioGroup } from '../context'; | ||
import { useOid, useOmit } from '../../../utils'; | ||
|
||
export interface Props extends Omit< | ||
ComponentPropsWithRef<'input'>, | ||
'style' | 'className' | ||
> { | ||
/** | ||
* The underlying input element id attribute. Automatically generated if not provided | ||
*/ | ||
id?: string, | ||
|
||
/** | ||
* The form field label | ||
*/ | ||
label: string, | ||
|
||
/** | ||
* The underlying input element value attribute | ||
*/ | ||
value: string, | ||
} | ||
|
||
/** | ||
* Radios appear as a ring shaped UI accompanied by a caption that allows | ||
* the user to choose only one option at a time. | ||
*/ | ||
const RadioButton = forwardRef<HTMLInputElement, Props>((props, ref) => { | ||
const { | ||
id, | ||
label, | ||
value, | ||
...rest | ||
} = props; | ||
|
||
const { | ||
value: controlledValue, | ||
onChange, | ||
disabled, | ||
required, | ||
name | ||
} = useRadioGroup(); | ||
|
||
const oid = useOid(id); | ||
|
||
const omitProps = useOmit(rest); | ||
|
||
const checked = value === controlledValue; | ||
|
||
return ( | ||
<> | ||
<input | ||
{...omitProps} | ||
className="ods-radio" | ||
checked={checked} | ||
disabled={disabled} | ||
id={oid} | ||
onChange={onChange} | ||
name={name} | ||
ref={ref} | ||
required={required} | ||
type="radio" | ||
value={value} | ||
/> | ||
<label | ||
children={label} | ||
className="ods-radio--label" | ||
htmlFor={oid} | ||
/> | ||
</> | ||
); | ||
}); | ||
|
||
export default RadioButton; |
128 changes: 128 additions & 0 deletions
128
packages/odyssey-react/src/components/Radio/RadioGroup/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,128 @@ | ||
/*! | ||
* Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved. | ||
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.") | ||
* | ||
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0. | ||
* Unless required by applicable law or agreed to in writing, software | ||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | ||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
* | ||
* See the License for the specific language governing permissions and limitations under the License. | ||
*/ | ||
|
||
import React, { forwardRef } from 'react'; | ||
import type { | ||
ChangeEvent, | ||
ReactElement, | ||
ComponentPropsWithRef | ||
} from 'react'; | ||
import { RadioGroupProvider } from '../context'; | ||
import { useOmit } from '../../../utils'; | ||
|
||
export interface Props extends Omit< | ||
ComponentPropsWithRef<'fieldset'>, | ||
'onChange' | 'style' | 'className' | ||
> { | ||
/** | ||
* One or more Radio.Button to be used together as a group | ||
*/ | ||
children: ReactElement | ReactElement[]; | ||
|
||
/** | ||
* The form field hint | ||
*/ | ||
hint?: string, | ||
|
||
/** | ||
* The form field legend | ||
*/ | ||
legend: string, | ||
|
||
/** | ||
* The underlying input element name attribute for the group | ||
*/ | ||
name: string, | ||
|
||
/** | ||
* The underlying input element required attribute for the group | ||
* @default true | ||
*/ | ||
required?: boolean, | ||
|
||
/** | ||
* The underlying input element disabled attribute for the group | ||
* @default false | ||
*/ | ||
disabled?: boolean, | ||
|
||
/** | ||
* The checked Radio.Button value attribute for a controlled group. | ||
*/ | ||
value?: string, | ||
|
||
/** | ||
* Callback executed when the input group fires a change event | ||
* @param {Object} event the event object | ||
* @param {string} value the string value of the input | ||
*/ | ||
onChange?: (event?: ChangeEvent<HTMLInputElement>, value?: string) => void, | ||
} | ||
|
||
/** | ||
* Radios appear as a ring shaped UI accompanied by a caption that allows | ||
* the user to choose only one option at a time. | ||
*/ | ||
const RadioGroup = forwardRef<HTMLFieldSetElement, Props>((props, ref) => { | ||
const { | ||
hint, | ||
children, | ||
disabled = false, | ||
legend, | ||
name, | ||
onChange, | ||
required = true, | ||
value, | ||
...rest | ||
} = props; | ||
|
||
const legendElement = ( | ||
<legend | ||
className="ods-input-legend" | ||
children={legend} | ||
/> | ||
); | ||
|
||
const inputElements = ( | ||
<div className="ods-fieldset-flex"> | ||
<RadioGroupProvider | ||
value={{ | ||
disabled, | ||
required, | ||
name, | ||
onChange, | ||
value | ||
}} | ||
children={children} | ||
/> | ||
</div> | ||
); | ||
|
||
const hintElement = ( | ||
<aside | ||
className="ods-field--hint" | ||
children={hint} | ||
/> | ||
); | ||
|
||
const omitProps = useOmit(rest); | ||
|
||
return ( | ||
<fieldset className="ods-fieldset" ref={ref} {...omitProps}> | ||
{ legendElement} | ||
{ inputElements} | ||
{ hint && hintElement} | ||
</fieldset> | ||
); | ||
}); | ||
|
||
export default RadioGroup; |
Oops, something went wrong.