This repository has been archived by the owner on Mar 31, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 29
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
1,723 additions
and
62 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
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
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,100 @@ | ||
| // @flow | ||
| import React from 'react'; | ||
|
|
||
| import Text from '../Text'; | ||
| import _Radio, { RadioIcon, HiddenRadio } from './styled'; | ||
|
|
||
| type Props = { | ||
| /** An accessible label for the radio */ | ||
| a11yLabel?: string, | ||
| /** Automatically focus on the radio */ | ||
| autoFocus?: boolean, | ||
| checked?: boolean | string, | ||
| className?: string, | ||
| /** Default value of the radio */ | ||
| defaultValue?: string, | ||
| /** Disables the radio */ | ||
| disabled?: boolean, | ||
| /** ID for the radio */ | ||
| id?: string, | ||
| /** Makes the radio required and sets aria-invalid to true */ | ||
| isRequired?: boolean, | ||
| /** radio label */ | ||
| label: string, | ||
| name?: string, | ||
| /** State of the radio. Can be any color in the palette. */ | ||
| state?: string, | ||
| /** Initial value of the radio */ | ||
| value?: string, | ||
| /** Function to invoke when focus is lost */ | ||
| onBlur?: Function, | ||
| /** Function to invoke when radio has changed */ | ||
| onChange?: Function, | ||
| /** Function to invoke when radio is focused */ | ||
| onFocus?: Function | ||
| }; | ||
|
|
||
| const Radio = ({ | ||
| a11yLabel, | ||
| autoFocus, | ||
| checked, | ||
| className, | ||
| defaultValue, | ||
| disabled, | ||
| id, | ||
| isRequired, | ||
| label, | ||
| onBlur, | ||
| onChange, | ||
| onFocus, | ||
| name, | ||
| state, | ||
| value, | ||
| ...props | ||
| }: Props) => ( | ||
| <_Radio | ||
| aria-describedby="label" | ||
| aria-invalid={state === 'danger'} | ||
| aria-label={a11yLabel} | ||
| aria-required={isRequired} | ||
| {...props} | ||
| > | ||
| <HiddenRadio | ||
| autoFocus={autoFocus} | ||
| checked={checked} | ||
| defaultValue={defaultValue} | ||
| disabled={disabled} | ||
| id={id} | ||
| onBlur={onBlur} | ||
| onChange={onChange} | ||
| onFocus={onFocus} | ||
| name={name} | ||
| state={state} | ||
| type="radio" | ||
| value={value} | ||
| /> | ||
| <RadioIcon state={state} /> | ||
| <Text id="label" marginLeft="xxsmall"> | ||
| {label} | ||
| </Text> | ||
| </_Radio> | ||
| ); | ||
|
|
||
| Radio.defaultProps = { | ||
| a11yLabel: null, | ||
| autoFocus: false, | ||
| checked: undefined, | ||
| className: null, | ||
| defaultValue: undefined, | ||
| disabled: false, | ||
| id: null, | ||
| isRequired: false, | ||
| onBlur: null, | ||
| onChange: null, | ||
| onFocus: null, | ||
| name: null, | ||
| state: null, | ||
| value: undefined | ||
| }; | ||
|
|
||
| export default Radio; |
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,62 @@ | ||
| --- | ||
| name: Radio | ||
| route: /form/radio | ||
| menu: Form | ||
| --- | ||
|
|
||
| import { Playground, PropsTable } from 'docz'; | ||
| import { Box } from '../primitives/index'; | ||
| import Radio from './index'; | ||
|
|
||
| # Radio | ||
|
|
||
| ## Import | ||
|
|
||
| `import { Radio } from 'fannypack'` | ||
|
|
||
| ## Basic Usage | ||
|
|
||
| <Playground> | ||
| <Radio name="weather" label="Sunny" /> | ||
| <Radio name="weather" label="Windy" /> | ||
| </Playground> | ||
|
|
||
| ## Disabled | ||
|
|
||
| Make the Radio disabled with the `disabled` prop. | ||
|
|
||
| <Playground> | ||
| <Radio disabled name="weather" label="Sunny" /> | ||
| </Playground> | ||
|
|
||
| ## States | ||
|
|
||
| A Radio can use different states (as per palette) such as `danger`, `success` and `warning`. | ||
|
|
||
| <Playground> | ||
| <Radio state="danger" name="weather" label="Sunny" /> | ||
| <Radio state="success" name="weather" label="Rainy" /> | ||
| <Radio state="warning" name="weather" label="Windy" /> | ||
| <Radio state="primary" name="weather" label="Overcast" /> | ||
| </Playground> | ||
|
|
||
| ## Props | ||
|
|
||
| <PropsTable of={Radio} /> | ||
|
|
||
| ## Theming | ||
|
|
||
| ### Schema | ||
|
|
||
| ```jsx | ||
| { | ||
| base: string | Object, | ||
| icon: { | ||
| base: string | Object, | ||
| checked: string | Object | ||
| disabled: string | Object, | ||
| focus: string | Object | ||
| tick: string | Object | ||
| } | ||
| } | ||
| ``` |
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,23 @@ | ||
| import React from 'react'; | ||
| import render from '../../_utils/tests/render'; | ||
| import Radio from '../Radio'; | ||
| import 'jest-styled-components'; | ||
|
|
||
| it('renders correctly for a basic radio', () => { | ||
| const { container } = render(<Radio />); | ||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('renders correctly for a disabled radio', () => { | ||
| const { container } = render(<Radio disabled />); | ||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| describe('states', () => { | ||
| ['danger', 'success', 'warning', 'primary'].forEach(state => { | ||
| it(`renders correctly for an radio with state ${state}`, () => { | ||
| const { container } = render(<Radio state={state} />); | ||
| expect(container.firstChild).toMatchSnapshot(); | ||
| }); | ||
| }); | ||
| }); |
Oops, something went wrong.