-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Input): component wrapper added
- Loading branch information
1 parent
63b6786
commit 84d32bb
Showing
18 changed files
with
811 additions
and
460 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,33 @@ | ||
|
|
||
| **ContentSwitcher** manipulates the content shown following an exclusive or “either/or” pattern. It is used to toggle between two or more content sections within the same space on screen. Only one section can be shown at a time. | ||
|
|
||
| ### Text | ||
|
|
||
| Be concise and specific. Titles have a max of two words. | ||
|
|
||
| ### Default selection | ||
| Based on usage, there should be a default selection. The default selection is always the first option in a switcher. | ||
|
|
||
| ContentSwitcher is forked from [Carbon Components](https://www.carbondesignsystem.com/components/content-switcher/code) | ||
| Based on usage, there should be a default selection. The default selection is always the first option in a switcher. | ||
|
|
||
| ContentSwitcher is forked from [Carbon Components](https://www.carbondesignsystem.com/components/content-switcher/code) | ||
|
|
||
| ### Usage with react | ||
|
|
||
| ```js | ||
| import { ContentSwitcher } from '@wfp/ui'; | ||
| import { iconAddGlyph } from '@wfp/ui'; | ||
| import { ContentSwitcher, Switch } from '@wfp/ui'; | ||
| import { iconAddGlyph } from '@wfp/icons'; | ||
| ``` | ||
|
|
||
| ```js | ||
| <ContentSwitcher onChange={onChangeAction}> | ||
| <Switch | ||
| name="one" | ||
| text="First section" | ||
| <Switch | ||
| name="one" | ||
| text="First section" | ||
| onClick={onClickAction} | ||
| kind="anchor" | ||
| href="#" | ||
| icon={iconAddGlyph} | ||
| icon={iconAddGlyph} | ||
| /> | ||
| <Switch name="two" text="Second section" /> | ||
| <Switch name="three" text="Third section" /> | ||
| </ContentSwitcher> | ||
| ``` | ||
| ``` |
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,56 @@ | ||
| import React from 'react'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { action } from '@storybook/addon-actions'; | ||
| import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; | ||
| import Input from '../Input'; | ||
| import TextInputSkeleton from '../TextInput/TextInput.Skeleton'; | ||
|
|
||
| const types = { | ||
| None: '', | ||
| 'Text (text)': 'text', | ||
| 'For email (email)': 'email', | ||
| 'For password (password)': 'password', | ||
| }; | ||
|
|
||
| const TextInputProps = () => ({ | ||
| className: 'some-class', | ||
| id: 'test2', | ||
| defaultValue: text('Default value (defaultValue)', 'This is a default value'), | ||
| labelText: text('Label text (labelText)', 'Text Input label'), | ||
| placeholder: text('Placeholder text (placeholder)', 'Placeholder text'), | ||
| light: boolean('Light variant (light)', false), | ||
| disabled: boolean('Disabled (disabled)', false), | ||
| hideLabel: boolean('No label (hideLabel)', false), | ||
| invalid: boolean('Show form validation UI (invalid)', false), | ||
| invalidText: text( | ||
| 'Form validation UI content (invalidText)', | ||
| 'A valid value is required' | ||
| ), | ||
| readOnly: boolean('Read-only (readOnly)', false), | ||
| helperText: text('Helper text (helperText)', 'Optional helper text.'), | ||
| onClick: action('onClick'), | ||
| type: select('Form control type (type)', types, 'text'), | ||
| onChange: action('onChange'), | ||
| }); | ||
|
|
||
| storiesOf('Components|Input', module) | ||
| .addDecorator(withKnobs) | ||
| .add('Default', () => ( | ||
| <Input {...TextInputProps()}> | ||
| <input></input> | ||
| </Input> | ||
| )) | ||
| .add('Functional', () => ( | ||
| <Input {...TextInputProps()}> | ||
| {props => { | ||
| return <input {...props} />; | ||
| }} | ||
| </Input> | ||
| )) | ||
| .add('skeleton', () => ( | ||
| <div> | ||
| <TextInputSkeleton /> | ||
| <br /> | ||
| <TextInputSkeleton hideLabel /> | ||
| </div> | ||
| )); |
Oops, something went wrong.